<template>
  <div style="height: 100%" v-loading="loading">
    <VueDragResize
      :isActiyve="true"
      :w="1100"
      :h="30"
      v-on:resizing="resize"
      v-on:dragging="resize"
      :isResizable="false"
      :parentLimitation="true"
      :parentW="w"
      :parentH="h"
      :x="160"
      :y="45"
      style="z-index: 999"
    >
      <div class="tool-copy">
        <div
          class="tool-bar2-copy"
          :class="{ red: changeColor == 15 }"
          @click="sreenFull()"
          title="窗口全屏"
        >
          <i class="el-icon-full-screen"></i> 全屏
        </div>
        <div
          class="tool-bar2-copy"
          :class="{ red: changeColor == 17 }"
          title="复位"
          @click="goHome"
        >
          <i class="el-icon-refresh-left"></i> 复位
        </div>
        <!-- 显示重置之后的倍数 -->
        <div id="viewZoomNumber" class="tool-bar2" style="margin-top: 8px">
          {{ viewZoomNumber }}
        </div>
        <div
          class="tool-bar2-copy"
          :class="{ red: changeColor == 13 }"
          @click="screenshot()"
          title="截图"
        >
          <i class="el-icon-crop"></i> 截图
        </div>
        <div class="cut-line-copy"></div>
        <div
          class="tool-bar2-copy"
          :class="{ red: changeColor == 40 }"
          title="测距工具"
          @click="toggleMeasureDistanceOnly"
        >
          <font-awesome-icon :icon="['fas', 'ruler']" size="sm" />测距
        </div>
        <div
          class="tool-bar2-copy"
          :class="{ red: changeColor == 10 }"
          title="周长、面积测量工具"
          @click="toggleMeasureArea"
        >
          <font-awesome-icon :icon="['fas', 'square']" size="sm" />测面积
        </div>
        <div
          class="tool-bar2-copy"
          :class="{ red: changeColor == 11 }"
          title="清除"
          @click="clearMeasure"
        >
          <font-awesome-icon :icon="['fas', 'brush']" size="sm" />橡皮
        </div>
        <div class="cut-line-copy"></div>
        <div
          class="tool-bar2-copy"
          :class="{ red: changeColor == 5 }"
          title="画笔标注"
          @click="togglePencil"
        >
          <font-awesome-icon :icon="['fas', 'pencil-alt']" size="sm" />画笔
        </div>
        <div
          class="tool-bar2-copy"
          :class="{ red: changeColor == 37 }"
          title="MH_index"
          @click="MHtogglePencil"
          style="margin-top: 8px"
        >
          MH
        </div>
        <div
          class="tool-bar2-copy"
          :class="{ red: changeColor == 21 }"
          @click="toggleCircle"
          title="圆形标注"
        >
          <i class="el-icon-help"></i>圆圈
        </div>
        <el-switch
          style="margin: 6px; float: left"
          v-model="switchValue.groupMark"
          active-text="组标注"
          inactive-text
        ></el-switch>
        <div class="cut-line-copy"></div>
        <div
          class="tool-bar2-copy"
          :class="{ red: changeColor == 12 }"
          title="智能预测"
          @click="drawerAi()"
          style="margin-top: 8px"
        >
          AI
        </div>
        <div
          class="tool-bar2-copy"
          :class="{ red: changeColor == 39 }"
          title="MHAI"
          @click="drawerMHAi()"
          style="margin-top: 8px"
        >
          MHAI
        </div>
        <div
          class="tool-bar2-copy"
          :class="{ red: changeColor == 36 }"
          title="诊断依据"
          @click="showClinicalDialogVisible()"
        >
          临床
        </div>
        <div
          class="tool-bar2-copy"
          :class="{ red: changeColor == 35 }"
          title="收藏"
          @click="collectChange"
        >
          <i class="el-icon-star-off"></i>
          {{ !!isCollected ? "取消收藏" : "收 藏" }}
        </div>
      </div>
    </VueDragResize>
    <div class="overlay" v-show="pathologyId">
      <div
        class="tool-bar1"
        style="font-size: 20px"
        :class="{ red: changeColor == 14 }"
        title="切片重扫"
        @click="sliceRescan"
      >
        <i class="el-icon-folder-delete"></i>
      </div>
      <div
        class="tool-bar3"
        :class="{ red: changeColor == 2 }"
        title="诊断列表"
        v-if="urlHaspDiagnosisType"
      >
        <font-awesome-icon
          :icon="['fas', 'user-friends']"
          size="lg"
          @click="patienterListMethod"
        />
      </div>
      <div class="tool-bar3" v-if="urlHaspDiagnosisType">
        <div
          style="margin-right: 3px"
          :class="{ red: changeColor == 1 }"
          title="上一个病人"
          @click="diagnosisLast()"
        >
          <font-awesome-icon :icon="['fas', 'angle-left']" size="lg" />
        </div>
        <div
          style="margin-left: 3px"
          :class="{ red: changeColor == 3 }"
          title="下一个病人"
          @click="diagnosisNext()"
        >
          <font-awesome-icon :icon="['fas', 'angle-right']" size="lg" />
        </div>
      </div>

      <div
        class="tool-bar1"
        :class="{ red: changeColor == 4 }"
        title="诊断详情"
      >
        <font-awesome-icon
          :icon="['fas', 'file-alt']"
          size="lg"
          @click="patienterDetailMethod"
        />
      </div>

      <!-- 分割线 -->
      <div class="cut-line"></div>
      <div
        class="tool-bar1"
        style="font-size: 20px"
        :class="{ red: changeColor == 29 }"
        @click="pictureToolPanelShow(2)"
        title="画笔工具"
      >
        <i class="el-icon-edit-outline"></i>
      </div>
      <div class="cut-line"></div>
      <div
        class="tool-bar1"
        style="font-size: 20px"
        :class="{ red: changeColor == 30 }"
        @click="pictureToolPanelShow(1)"
        title="切片工具"
      >
        <i class="el-icon-menu"></i>
      </div>
      <div
        class="tool-bar1"
        style="font-size: 20px"
        :class="{ red: changeColor == 31 }"
        @click="pictureToolPanelShow(3)"
        title="色彩工具"
      >
        <i class="el-icon-picture-outline-round"></i>
      </div>

      <div
        class="tool-bar1"
        style="font-size: 20px"
        :class="{ red: changeColor == 32 }"
        @click="pictureToolPanelShow(4)"
        title="设置"
      >
        <i class="el-icon-setting"></i>
      </div>
      <div class="cut-line"></div>
      <div
        class="tool-bar1"
        :class="{ red: changeColor == 12 }"
        title="智能预测"
        @click="drawerAi()"
      >
        <span class="tool-icon ai-icon">AI</span>
      </div>
      <div
        class="tool-bar1"
        :class="{ red: changeColor == 24 }"
        title="AI分析列表"
        @click="AIEvaluation()"
      >
        <i class="el-icon-notebook-2"></i>
      </div>
      <div class="cut-line"></div>
      <div
        class="tool-bar1"
        :class="{ red: changeColor == 33 }"
        title="切片信息"
        @click="isShowSliceInfo()"
      >
        <i class="el-icon-reading"></i>
      </div>
      <div
        class="tool-bar1"
        :class="{ red: changeColor == 34 }"
        title="诊断依据"
        @click="isShowDiagnosticBasis()"
      >
        <i class="el-icon-notebook-1"></i>
      </div>
      <div
        class="tool-bar1"
        :class="{ red: changeColor == 38 }"
        title="MH"
        @click="getMhIndexList"
      >
        MH
      </div>
      <!-- <div class="tool-bar1" :class="{ red:changeColor == 20}" title="智能分析"  @click="analysisAI()">
                <div class="keyword" style="margin-left: 20px;">F4</div>
                <font-awesome-icon :icon="['fas', 'brain']"  size="lg"/>
      </div>-->
      <!--<p id="predictAI" class="predictAI"></p>-->
    </div>
    <div class="divCoordinateColor" v-if="isColorPanelShow">
      <div class="block">
        <el-row>
          <el-col :span="6" style="padding-top: 8px">
            <span style="padding-top: 2px; padding-left: 2px; color: #fff"
              >对比度</span
            >
          </el-col>
          <el-col :span="18">
            <el-slider
              v-model="coordinateColor.contrast"
              @input="onContrastSlideChange"
            ></el-slider>
          </el-col>
        </el-row>
      </div>
      <div class="block">
        <el-row>
          <el-col :span="6" style="padding-top: 8px; color: #fff">
            <span class="demonstration">亮度</span>
          </el-col>
          <el-col :span="18">
            <el-slider
              v-model="coordinateColor.light"
              @input="onLightSlideInput"
            ></el-slider>
          </el-col>
        </el-row>
      </div>
      <div class="block">
        <el-row>
          <el-col :span="6" style="padding-top: 8px; color: #fff">
            <span class="demonstration">Gama</span>
          </el-col>
          <el-col :span="18">
            <el-slider
              v-model="coordinateColor.gama"
              @input="onGamaSlideInput"
            ></el-slider>
          </el-col>
        </el-row>
      </div>
      <!--            <div class="block">-->
      <!--                <el-row>-->
      <!--                    <el-col :span="6" style="padding-top:8px"><span class="demonstration">红</span></el-col>-->
      <!--                    <el-col :span="18">-->
      <!--                        <el-slider v-model="coordinateColor.red"></el-slider>-->
      <!--                    </el-col>-->
      <!--                </el-row>-->
      <!--            </div>-->
      <!--            <div class="block">-->
      <!--                <el-row>-->
      <!--                    <el-col :span="6" style="padding-top:8px"><span class="demonstration">黄</span></el-col>-->
      <!--                    <el-col :span="18">-->
      <!--                        <el-slider v-model="coordinateColor.yellow"></el-slider>-->
      <!--                    </el-col>-->
      <!--                </el-row>-->
      <!--            </div>-->
      <!--            <div class="block">-->
      <!--                <el-row>-->
      <!--                    <el-col :span="6" style="padding-top:8px"><span class="demonstration">蓝</span></el-col>-->
      <!--                    <el-col :span="18">-->
      <!--                        <el-slider v-model="coordinateColor.blue"></el-slider>-->
      <!--                    </el-col>-->
      <!--                </el-row>-->
      <!--            </div>-->
    </div>

    <div class="divPictureHandle" v-if="isSlicePanelShow">
      <div class="tool-bar2" :class="{ red: changeColor == 18 }" title="右旋">
        <font-awesome-icon
          @click="rotateRight"
          :icon="['fas', 'redo']"
          size="lg"
        />
      </div>
      <!-- <div class="tool-bar-degree" style="width: 40px">
                <el-input size="mini" v-model.number="viewerAngleCopy"></el-input>
      </div>-->
      <div class="tool-bar2" :class="{ red: changeColor == 19 }" title="左旋">
        <font-awesome-icon
          @click="rotateLeft"
          :icon="['fas', 'undo']"
          size="lg"
        />
      </div>
      <div
        class="tool-bar2"
        :class="{ red: changeColor == 13 }"
        @click="screenshot()"
        title="截图"
      >
        <font-awesome-icon :icon="['fas', 'crop']" size="lg" />
      </div>
      <div
        class="tool-bar2"
        :class="{ red: changeColor == 15 }"
        style="font-size: 25px"
        @click="sreenFull()"
        title="窗口全屏"
      >
        <i class="el-icon-full-screen"></i>
      </div>

      <div
        class="tool-bar2"
        :class="{ red: changeColor == 16 }"
        data-toggle="modal"
        data-target="#myModal"
        @click="hotkeyMethods"
        title="快捷键"
      >
        <font-awesome-icon :icon="['fas', 'keyboard']" size="lg" />
      </div>

      <div class="tool-bar2" :class="{ red: changeColor == 17 }" title="重置">
        <font-awesome-icon
          @click="goHome"
          :icon="['fas', 'globe-asia']"
          size="lg"
        />
      </div>

      <div
        class="tool-bar2"
        :class="{ red: changeColor == 9 }"
        title="测距工具"
      >
        <font-awesome-icon
          :icon="['fas', 'ruler']"
          size="lg"
          @click="toggleMeasureDistance"
        />
      </div>
      <div
        class="tool-bar2"
        :class="{ red: changeColor == 10 }"
        title="周长、面积测量工具"
      >
        <font-awesome-icon
          :icon="['fas', 'square']"
          size="lg"
          @click="toggleMeasureArea"
        />
      </div>
      <div
        class="tool-bar2"
        style="font-size: 25px"
        :class="{ red: changeColor == 25 }"
        @click="electronicPointer"
        title="教鞭"
      >
        <i class="el-icon-aim"></i>
      </div>
      <div class="tool-bar2" style="font-size: 25px" :class="{ red: changeColor == 26 }" 
          title="宫格布局" id="gridLayOut">
          <i class="el-icon-s-grid" @click="gridLayout"></i>
      </div>
      <div class="cut-line" style="float: right"></div>
      <!-- 显示重置之后的倍数 -->
      <div id="viewZoomNumber" class="tool-bar2">
        {{ viewZoomNumber }}
      </div>
    </div>
    <div class="divMarkLabelHandle" v-if="isPencilPanelShow">
      <div
        class="tool-bar2"
        :class="{ red: changeColor == 5 }"
        title="画笔标注"
      >
        <font-awesome-icon
          :icon="['fas', 'pencil-alt']"
          size="lg"
          @click="togglePencil"
        />
      </div>
      <div
        class="tool-bar2"
        :class="{ red: changeColor == 6 }"
        title="矩形标注"
      >
        <font-awesome-icon
          :icon="['fas', 'vector-square']"
          size="lg"
          @click="toggleRectangle"
        />
      </div>
      <div
        class="tool-bar2"
        :class="{ red: changeColor == 7 }"
        title="多边形标注"
      >
        <font-awesome-icon
          :icon="['fas', 'draw-polygon']"
          size="lg"
          @click="togglePolygon"
        />
      </div>
      <div
        class="tool-bar2"
        style="font-size: 25px"
        :class="{ red: changeColor == 21 }"
        @click="toggleCircle"
        title="圆形标注"
      >
        <i class="el-icon-help"></i>
      </div>
      <div
        class="tool-bar2"
        style="font-size: 25px"
        :class="{ red: changeColor == 22 }"
        @click="togglePencilLine"
        title="涂抹标注"
      >
        <i class="el-icon-edit"></i>
      </div>

      <div
        class="tool-bar2"
        style="font-size: 25px"
        :class="{ red: changeColor == 23 }"
        @click="toggleArrow"
        title="箭头"
      >
        <i class="el-icon-top-right"></i>
      </div>
      <div
        class="tool-bar2"
        :class="{ red: changeColor == 8 }"
        title="隐藏标注"
      >
        <font-awesome-icon
          :icon="['fas', 'eye-slash']"
          size="lg"
          @click="hideCallout"
          v-if="this.ifhideCallout"
        />
        <font-awesome-icon
          :icon="['fas', 'eye']"
          v-if="!this.ifhideCallout"
          size="lg"
          @click="hideCallout"
        />
      </div>
      <div class="tool-bar2" :class="{ red: changeColor == 11 }" title="清除">
        <font-awesome-icon
          :icon="['fas', 'brush']"
          size="lg"
          @click="clearMeasure"
        />
      </div>
    </div>
    <div class="divSettingSwitch" v-if="isSwitchPanelShow">
      <el-switch
        style="margin: 5px"
        v-model="switchValue.scale"
        active-text="比例尺"
        inactive-text
      ></el-switch>
      <el-switch
        style="margin: 5px"
        v-model="switchValue.zoom"
        active-text="缩放"
        inactive-text
      ></el-switch>
      <el-switch
        style="margin: 5px"
        v-model="switchValue.disc"
        active-text="播放"
        inactive-text
      ></el-switch>
      <el-switch
        style="margin: 5px"
        v-model="switchValue.markLabel"
        active-text="标注"
        inactive-text
      ></el-switch>
      <el-switch
        style="margin: 5px"
        v-model="switchValue.AIAnalysis"
        active-text="AI分析"
        inactive-text
      ></el-switch>
      <el-switch
        style="margin: 5px"
        v-model="switchValue.patientId"
        active-text="病理号"
        inactive-text
      ></el-switch>
      <el-switch
        style="margin: 5px"
        v-model="switchValue.net"
        active-text="网格"
        inactive-text
      ></el-switch>
      <el-switch
        style="margin: 5px"
        v-model="switchValue.isFlicker"
        active-text="闪烁"
        inactive-text
      />
      <el-switch
        style="margin: 5px"
        v-model="switchValue.groupMark"
        active-text="组标注"
        inactive-text
      ></el-switch>
      <!--            <el-switch style="margin:5px"-->
      <!--                       v-model="switchValue.navigator"-->
      <!--                       active-text="导航"-->
      <!--                       inactive-text="">-->
      <!--            </el-switch>-->
    </div>
    <div class="openSeadragon">
      <open-seadragon
        :key="newTimer"
        v-if="openseadragonIsShow"
        v-show="ifOpenseadragon"
        ref="openseadragon"
        :dzi-url="dziUrl"
        :pixelsPerMeter="1992428.7706714484"
        @annotation-drawing-end="annotationDrawingEnd"
        @measure-annotation-drawing-end="measureAnnotationDrawingEnd"
        @mh-annotation-drawing-end="mhAnnotationDrawingEnd"
        @uploadAnnotation="uploadAnnotation"
        @jumpToNumber="jumpToNumber"
        :annotationsData="annotationsDataInit"
        :AiAnnotationsData="aiAnnotationsData"
        :MHAnnotationsData="mhAnnotationsData"
        :info="info"
        :bgColor="bgColor"
        :tiles="tiles"
        :type="sourceType"
        :imageInfo="imageInfo"
        style="width: 100vw; height: 100vh"
        @openseadragon-open="openseadragonOpen"
        @ai-annotation-drawing-end="aiAnnotationDrawingEnd"
        @view-zoom="viewZoom"
        @annotation-select="annotationSelect"
      ></open-seadragon>
    </div>
    <div>
      <el-dialog
        title="诊断列表"
        :visible.sync="visibleDict.patienterList"
        @closed="DiagnosisListclosed"
        width="80%"
        v-dialogDrag
      >
        <DiagnosisList></DiagnosisList>
      </el-dialog>
      <el-dialog
        title="诊断详情"
        class="diagnosisDetailClose"
        :visible.sync="visibleDict.patienterDetail"
        :key="pathologyId"
        :fullscreen="isFullScreen"
        width="80%"
        @closed="patienterDetailclosed"
      >
        <template>
          <div
            style="
              position: absolute;
              right: 50px;
              font-size: 20px;
              z-index: 999;
            "
            @click="becomeFullScreen"
          >
            <i class="el-icon-zoom-in"></i>
          </div>
        </template>
        <!-- <diagnosis-detail :ActiveTab="activeTabItem"></diagnosis-detail> -->
        <diagnosis-detail :typeActiveTab="activeTabItem"></diagnosis-detail>
      </el-dialog>
      <el-dialog
        :visible.sync="visibleDict.annotationsWarn"
        width="20%"
        :show-close="false"
        :close-on-click-modal="false"
      >
        <el-form ref="markRefForm" :model="mark" :rules="markRules">
          <el-row>
            <el-col :span="24">
              <el-form-item label="标注笔记:" style="margin-bottom: 10px">
                <el-input
                  type="textarea"
                  :rows="3"
                  v-model="mark.warning"
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注内容:">
                <el-input
                  type="textarea"
                  :rows="1"
                  v-model="mark.remark"
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top: 16px">
            <el-col :span="12" style="text-align: center">
              <el-form-item>
                <el-button type="primary" @click="Submit" size="mini"
                  >确定</el-button
                >
              </el-form-item>
            </el-col>
            <el-col :span="12" style="text-align: center">
              <el-form-item>
                <el-button @click="annotationsWarnCancel" size="mini"
                  >取消</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
      <el-dialog
        title="快捷键说明"
        @closed="hotkeyclosed"
        :visible.sync="hotkey"
        width="50%"
      >
        <HotKey></HotKey>
      </el-dialog>
      <div v-if="annDialogVisible" class="updateInfo">
        <el-form
          ref="markRefForm"
          :model="mark"
          :rules="markRules"
          style="padding: 3px"
        >
          <el-form-item
            prop="warning"
            class="formLableColor"
            label="标注笔记:"
          >
            <el-input
              type="textarea"
              :rows="2"
              v-model="mark.warning"
              size="mini"
            ></el-input>
          </el-form-item>
          <el-form-item
            prop="remark"
            class="formLableColor"
            label="备注内容:"
          >
            <el-input
              type="textarea"
              :rows="2"
              v-model="mark.remark"
              size="mini"
            ></el-input>
          </el-form-item>
          <el-form-item class="formLableColor" label="面积:">
            <span>{{ updateAnnInfo.area }}μm²</span>
          </el-form-item>
          <el-form-item class="formLableColor" label="长:">
            <span>{{ updateAnnInfo.width }}μm</span>
          </el-form-item>
          <el-form-item class="formLableColor" label="宽:">
            <span>{{ updateAnnInfo.height }}μm</span>
          </el-form-item>
          <el-form-item class="formLableColor" label="标注人:">
            <span>{{ updateAnnInfo.saveUserName }}</span>
          </el-form-item>
          <el-form-item class="formLableColor" label="时间:">
            <span>{{ updateAnnInfo.createAt }}</span>
          </el-form-item>
        </el-form>
        <div slot="footer" style="float: right" class="dialog-footer">
          <el-button size="mini" @click="annDialogVisible = false"
            >取 消</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="updateAnnSubmit(updateAnnInfo.annotationId)"
            >确 定</el-button
          >
        </div>
      </div>
      <AIFloating
        ref="AIFloatingREF"
        v-if="
          drawer &&
          (specimenType === 1577 ||
            specimenType === 1579 ||
            this.specimenType === 1565 ||
            this.specimenType === 1567)
        "
        @jumpTo="jumpTo"
        :AIdata="AIdata"
      ></AIFloating>
      <AiTct
        ref="AiTct"
        v-if="drawer && specimenType === 1578"
        :tctPartOfGroup="tctPartOfGroup"
        @click-part-0f-group="clickPartOfGroup"
      ></AiTct>
      <SliceInfo
        ref="SliceInfo"
        :SliceInfoData="SliceInfoData"
        :currentLevelLabel="currentLevelLabel"
        v-if="SliceInfoData != null && visibleDict.isShowSliceInfoStatus"
      ></SliceInfo>
      <viewer-diagnostic-basis
        ref="viewerDiagnosticBasis"
        v-show="diagnosticBasisData.showStatus && pathologyId"
        @calcTotleScore="calcTotleScore"
      />
      <Analysis v-if="Ifanalysis"></Analysis>
      <!-- 评价列表 -->
      <el-dialog
        title="AI分析列表"
        @closed="AIEvaluationClose"
        :visible.sync="visibleDict.AIEvaluationDialogList"
        width="80%"
        center
      >
        <el-form label-width="70px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="病理号">
                <el-input
                  v-model="EvaluationFormFilter.pathologyId"
                  placeholder="请输入查询的病理号"
                  class="input-form"
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="切片id">
                <el-input
                  v-model="EvaluationFormFilter.biopsyId"
                  placeholder="请输入查询的切片id"
                  class="input-form"
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2" :offset="8">
              <el-button size="mini" @click="search">
                <font-awesome-icon
                  :icon="['fas', 'search']"
                ></font-awesome-icon>
              </el-button>
            </el-col>
            <el-col :span="2">
              <el-button @click="AIEvaluationDialogShow" size="mini"
                >新增</el-button
              >
            </el-col>
          </el-row>
        </el-form>
        <base-table
          :data="AIEvaluationDialogListTableData"
          :header="AIEvaluationDialogListTableHeader"
          :operation="operation"
          :pageInfo="pageInfo"
          :pageSizes="[5, 10, 15]"
          @handleClick="exampleTableButtonClick"
          @pageJumpTo="exampleTablePageJumpTo"
          @sizeChange="exampleTableSizeChange"
        ></base-table>
      </el-dialog>
      <!-- 诊断实验结果统计 -->
      <el-dialog
        title="诊断实验结果统计"
        :visible.sync="experimentDialog"
        width="40%"
        center
        @close="closeExperimentDialog"
      >
        <DiagnosisResultStatisticsComp
          :isAutoRefresh="false"
          ref="DiagnosisResultStatisticsComp"
        >
        </DiagnosisResultStatisticsComp>
      </el-dialog>
      <!-- 评价详情 -->
      <el-dialog
        title="AI分析准确性评价"
        :visible.sync="visibleDict.AIEvaluationDialog"
        width="40%"
        center
        @close="closeAIDialog"
      >
        <el-form label-width="100px">
          <el-row>
            <el-col :span="10" :offset="4">
              <el-form-item label="病理号">
                <el-input
                  v-model="AIEvaluationForm.pathologyId"
                  placeholder="请输入病理号"
                  class="input-form"
                  size="mini"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="切片名称">
                <el-input
                  v-model="AIEvaluationForm.sliceName"
                  placeholder="请输入切片名称"
                  class="input-form"
                  size="mini"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="height40">阴阳性:</el-col>
            <el-col :span="10">
              <el-form-item label="AI分析">
                <el-input
                  v-model="AIEvaluationForm.masculineAi"
                  placeholder
                  class="input-form"
                  size="mini"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="专家意见">
                <el-select
                  v-model="AIEvaluationForm.expertAdvice"
                  placeholder="请选择专家意见"
                  class="picker-form"
                  size="mini"
                >
                  <el-option
                    v-for="(data, index) in AIEvaluationFormList.yinyangOpinion"
                    :key="index"
                    :label="data.name"
                    :value="data.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="height40">专家诊断:</el-col>
            <el-col :span="20">
              <el-row class="height40">
                <el-col :span="4">
                  <el-radio v-model="AIEvaluationForm.radio" label="低瘤"
                    >低瘤</el-radio
                  >
                </el-col>
                <el-col :span="4">
                  <el-radio v-model="AIEvaluationForm.radio" label="高瘤"
                    >高瘤</el-radio
                  >
                </el-col>
                <el-col :span="4">
                  <el-radio v-model="AIEvaluationForm.radio" label="腺癌"
                    >腺癌</el-radio
                  >
                </el-col>
                <el-col :span="4">
                  <el-radio v-model="AIEvaluationForm.radio" label="印戒"
                    >印戒</el-radio
                  >
                </el-col>
                <el-col :span="4">
                  <el-radio
                    v-model="AIEvaluationForm.radio"
                    label="诊断不明，提示准确"
                    >诊断不明，提示准确</el-radio
                  >
                </el-col>
              </el-row>
              <el-row class="height40">
                <el-col :span="4">
                  <el-radio v-model="AIEvaluationForm.radio" label="鳞癌"
                    >鳞癌</el-radio
                  >
                </el-col>
                <el-col :span="4">
                  <el-radio v-model="AIEvaluationForm.radio" label="淋巴瘤"
                    >淋巴瘤</el-radio
                  >
                </el-col>

                <el-col :span="4">
                  <el-radio v-model="AIEvaluationForm.radio" label="其他"
                    >其他</el-radio
                  >
                </el-col>
                <el-col :span="8">
                  <el-input
                    v-model="AIEvaluationForm.other"
                    placeholder
                    class="input-form"
                    size="mini"
                  ></el-input>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row style="margin: 10px auto">
            <el-col :span="24">备注（可记录错误的勾画圈号，如可疑1）:</el-col>
            <el-col>
              <el-input
                type="textarea"
                v-model="AIEvaluationForm.remark"
              ></el-input>
            </el-col>
          </el-row>
          <el-row style="text-align: center">
            <el-button
              v-show="!!AIEvaluationForm.masculineAi"
              type="primary"
              @click="correctYinYang"
              icon="el-icon-check"
              >准确(阴阳性判断)</el-button
            >
            <el-button
              v-show="!!AIEvaluationForm.masculineAi"
              type="danger"
              @click="errorYinYang"
              icon="el-icon-close"
              >错误(阴阳性判断)</el-button
            >
          </el-row>
          <el-row>
            <el-col :span="4" class="height40">慢性炎症:</el-col>
            <el-col :span="10">
              <el-form-item label="AI分析">
                <el-input
                  v-model="AIEvaluationForm.chronicInflammationAi"
                  placeholder
                  class="input-form"
                  size="mini"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="专家意见">
                <el-select
                  v-model="AIEvaluationForm.chronicInflammationExpertAdvice"
                  placeholder="请选择专家意见"
                  class="picker-form"
                  size="mini"
                >
                  <el-option
                    v-for="(
                      data, index
                    ) in AIEvaluationFormList.expertAdviceList"
                    :key="index"
                    :label="data.name"
                    :value="data.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="height40">肠化:</el-col>
            <el-col :span="10">
              <el-form-item label="AI分析">
                <el-input
                  v-model="AIEvaluationForm.imAi"
                  placeholder
                  class="input-form"
                  size="mini"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="专家意见">
                <el-select
                  v-model="AIEvaluationForm.imExpertAdvice"
                  placeholder="请选择专家意见"
                  class="picker-form"
                  size="mini"
                >
                  <el-option
                    v-for="(
                      data, index
                    ) in AIEvaluationFormList.expertAdviceList"
                    :key="index"
                    :label="data.name"
                    :value="data.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="height40">萎缩:</el-col>
            <el-col :span="10">
              <el-form-item label="AI分析">
                <el-input
                  v-model="AIEvaluationForm.atrophyAi"
                  placeholder
                  class="input-form"
                  size="mini"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="专家意见">
                <el-select
                  v-model="AIEvaluationForm.atrophyExpertAdvice"
                  placeholder="请选择专家意见"
                  class="picker-form"
                  size="mini"
                >
                  <el-option
                    v-for="(
                      data, index
                    ) in AIEvaluationFormList.expertAdviceList"
                    :key="index"
                    :label="data.name"
                    :value="data.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="height40">活动度:</el-col>
            <el-col :span="10">
              <el-form-item label="AI分析">
                <el-input
                  v-model="AIEvaluationForm.activityAi"
                  placeholder
                  class="input-form"
                  size="mini"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="专家意见">
                <el-select
                  v-model="AIEvaluationForm.activityExpertAdvice"
                  placeholder="请选择专家意见"
                  class="picker-form"
                  size="mini"
                >
                  <el-option
                    v-for="(
                      data, index
                    ) in AIEvaluationFormList.expertAdviceList"
                    :key="index"
                    :label="data.name"
                    :value="data.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="height40">HP:</el-col>
            <el-col :span="10">
              <el-form-item label="AI分析">
                <el-input
                  v-model="AIEvaluationForm.hpai"
                  placeholder
                  class="input-form"
                  size="mini"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="专家意见">
                <el-select
                  v-model="AIEvaluationForm.hpexpertAdvice"
                  placeholder="请选择专家意见"
                  class="picker-form"
                  size="mini"
                >
                  <el-option
                    v-for="(
                      data, index
                    ) in AIEvaluationFormList.expertAdviceList"
                    :key="index"
                    :label="data.name"
                    :value="data.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="height40">异性增生:</el-col>
            <el-col :span="10">
              <el-form-item label="AI分析">
                <el-input
                  v-model="AIEvaluationForm.alienGrowthAi"
                  placeholder
                  class="input-form"
                  size="mini"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="专家意见">
                <el-select
                  v-model="AIEvaluationForm.alienGrowthExpertAdvice"
                  placeholder="请选择专家意见"
                  class="picker-form"
                  size="mini"
                >
                  <el-option
                    v-for="(
                      data, index
                    ) in AIEvaluationFormList.expertAdviceList"
                    :key="index"
                    :label="data.name"
                    :value="data.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10" :offset="4">
              <el-form-item label="评价专家">
                <el-input
                  v-model="AIEvaluationForm.evaluateExpert"
                  placeholder
                  class="input-form"
                  size="mini"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="评价日期">
                <el-date-picker
                  v-model="AIEvaluationForm.evaluateTime"
                  type="datetime"
                  size="mini"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="closeAIEvaluationDialog"
            >取 消</el-button
          >
          <el-button
            v-show="!!AIEvaluationForm.masculineAi"
            type="primary"
            @click="copyAiAnalysis"
            icon="el-icon-check"
            >全部准确</el-button
          >
          <el-button
            type="primary"
            @click="putExpertOpinion"
            v-show="btnSureShow == true"
            >提 交</el-button
          >
        </span>
      </el-dialog>

      <div
        class="dialog"
        v-if="annotationsData.length > 0 && switchValue.markLabel"
      >
        <ul>
          <template>
            <li
              v-for="(data, index) in annotationsData"
              :key="index"
              @mouseover="selectStyle(data)"
              @mouseout="outStyle(data)"
            >
              <div style="position: relative; height: 100px">
                <img
                  class="liImg"
                  v-bind:src="data.imageUrl"
                  @click="updateAnnotation(data)"
                />
                <img
                  src="/images/cancel.png"
                  @click="deleteAnnotation(data.annotationId)"
                  style="
                    position: absolute;
                    right: 10px;
                    width: 20px;
                    cursor: pointer;
                  "
                />
                <span class="annPicUserName">{{ data.saveUserName }}</span>
              </div>
              <div :class="{ active1: data.active }" v-show="data.active">
                <el-form style="padding: 3px">
                  <el-form-item
                    type="textarea"
                    :rows="2"
                    class="formLableColor"
                    label="标注笔记:"
                  >
                    <span>{{ data.remarkOne }}</span>
                  </el-form-item>
                  <el-form-item
                    type="textarea"
                    :rows="2"
                    class="formLableColor"
                    label="备注内容:"
                  >
                    <span>{{ data.remarkTwo }}</span>
                  </el-form-item>
                  <el-form-item class="formLableColor" label="面积:">
                    <span>{{ data.areaInfo.area }}μm²</span>
                  </el-form-item>
                  <el-form-item class="formLableColor" label="长:">
                    <span>{{ data.areaInfo.width }}μm</span>
                  </el-form-item>
                  <el-form-item class="formLableColor" label="宽:">
                    <span>{{ data.areaInfo.height }}μm</span>
                  </el-form-item>
                  <el-form-item class="formLableColor" label="标注人:">
                    <span>{{ data.saveUserName }}</span>
                  </el-form-item>
                  <el-form-item class="formLableColor" label="时间:">
                    <span>{{ data.createAt }}</span>
                  </el-form-item>
                </el-form>
              </div>
            </li>
          </template>
        </ul>
      </div>
      <div class="quality-evaluation" v-show="qualityEvaluationShow">
        <el-form label-width="75px">
          <el-row>
            <el-col :span="4">
              <el-form-item label="切片质量:">
                <el-select
                  v-model="qualityEvaluationForm.biopsyQuality"
                  class="picker-form"
                  size="mini"
                >
                  <el-option
                    v-for="t in biopsyQualityList"
                    :key="t.id"
                    :label="t.label"
                    :value="t.label"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="清晰度:">
                <el-select
                  v-model="qualityEvaluationForm.scanDefinition"
                  class="picker-form"
                  size="mini"
                >
                  <el-option
                    v-for="t in scanQualityList"
                    :key="t.id"
                    :label="t.label"
                    :value="t.label"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1" class="juzhong">
              <el-button type="primary" size="mini" @click="submitEvaluate"
                >提交</el-button
              >
            </el-col>
            <el-col :span="2" class="juzhong">
              <el-input
                type="number"
                min="1"
                v-model="qualityEvaluationForm.serialNumber"
                placeholder="切片序号"
                class="input-form"
                size="mini"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  size="mini"
                  @click="findSliceByCurrentBiopsyCount"
                ></el-button>
              </el-input>
            </el-col>
            <el-col :span="1" class="juzhong" style="margin-left: 15px">
              <el-button type="primary" size="mini" @click="scanerPrev"
                >上一张</el-button
              >
            </el-col>
            <el-col :span="1" class="juzhong">
              <el-button type="primary" size="mini" @click="scanerNext"
                >下一张</el-button
              >
            </el-col>
            <el-col :span="2" class="juzhong">
              <el-button type="primary" size="mini" @click="rescan"
                >需重扫并进入下一张</el-button
              >
            </el-col>

            <el-col :span="1" class="juzhong">
              <el-button type="primary" size="mini" @click="scanQualityPass"
                >通过并进入下一张</el-button
              >
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8" :offset="8">
              <div class="juzhong">
                当前第
                <span class="red-color">
                  {{ qualityEvaluationForm.currentSerialNumber.split("/")[0] }}
                </span>
                片/共
                <span class="red-color">
                  {{ qualityEvaluationForm.currentSerialNumber.split("/")[1] }}
                </span>
                片
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="F3info" v-if="switchValue.markLabel">
        <span v-html="F3AnalysisInfo"></span>
      </div>

      <div
        class="leftPic"
        @mouseover="mouseover"
        @mouseout="mouseout"
        v-bind:style="styleObjectClass"
        v-if="showleftPic"
      >
        <div
          :key="index"
          v-for="(data, index) in biopsyList"
          style="position: relative"
        >
          <img
            v-bind:src="ImageServiceURL + data.previewUrl"
            :class="isActive == index ? 'yesActive' : 'noActive'"
            @click="
              getAnnotations(
                data.id,
                data.newFilename,
                data.originFilename,
                data.labelUrl,
                index
              )
            "
          />
          <div
            :class="[
              data.pred == '0'
                ? 'greenStatus'
                : data.pred == '1'
                ? 'redStatus'
                : 'greyStatus',
            ]"
            class="colorStatus"
          ></div>
        </div>
      </div>

      <div
        class="rightLable"
        v-show="this.switchValue.patientId"
        ref="IMAGE_SERVICE"
        @click="imagePinwheel($event)"
      >
        <img
          style="height: 95px; width: 201px"
          v-bind:src="ImageServiceURL + reversedLabelUrl"
          title="鼠标左键点击可顺时针旋转90度"
        />
      </div>
    </div>
    <!-- 教鞭 -->
    <canvas id="ruler-overlay" v-show="isAllowDrawLine"></canvas>
    <!-- 截图 -->
    <canvas id="drawRectCanvas"></canvas>
    <canvas id="shadeCanvas"></canvas>

    <div
      id="prescription"
      style="display: none; background: white; flex-wrap: wrap"
    >
      <!--倍率框-->
      <div id="rate" style="text-align: left; width: 100%"></div>
      <!--时间框-->
      <div id="screenshotTime" style="text-align: left; width: 100%"></div>
      <!--可输入框-->
      <div
        id="SCinputBox"
        style="
          text-align: center;
          width: 100%;
          word-break: break-all;
          word-wrap: break-word;
          background: white;
          font-size: 18px;
        "
        contenteditable="true"
        placeholder="请输入描述内容"
      ></div>
    </div>
    <div id="canvasToolbar">
      <div class="canvasButton" title="退出截图" id="cancel" @click="sCancel">
        <font-awesome-icon :icon="['fas', 'power-off']" size="lg" />
      </div>
      <div class="canvasButton" title="完成截图" id="success" @click="sSuccess">
        <font-awesome-icon :icon="['fas', 'check']" size="lg" />
      </div>
    </div>
    <el-dialog
      v-dialogDrag
      title="临床"
      :visible.sync="clinicalDialogVisible"
      width="75%"
    >
      <DiagnosisDetailClinical
        :typeActiveTab="clinicalActiveTab"
      ></DiagnosisDetailClinical>
    </el-dialog>
    <el-dialog
      v-dialogDrag
      title="MH"
      :visible.sync="mhDialogVisible"
      width="75%"
      @close="closeMHDialog"
    >
      <el-table
        v-if="mhDialogVisible"
        :data="MHData"
        border
        :cell-style="{ 'text-align': 'center' }"
        :header-cell-style="{
          'background-color': '#E6E9EF',
          color: '#777C7C',
          'font-weight': '400',
          'font-size': '15px',
          'border-right': '1px solid #ffffff',
          'text-align': 'center',
        }"
        size="mini"
        style="width: 100%; margin-top: 20px; min-height: 750px"
      >
        <el-table-column label="序号" prop="index" width="60" align="center">
        </el-table-column>
        <el-table-column label="缩略图">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="ImageServiceURL + scope.row.previewUrl"
              :preview-src-list="[ImageServiceURL + scope.row.previewUrl]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="热力图">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="ImageServiceURL + scope.row.url"
              :preview-src-list="[ImageServiceURL + scope.row.url]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="分数图">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="ImageServiceURL + scope.row.fractionUrl"
              :preview-src-list="[ImageServiceURL + scope.row.fractionUrl]"
            ></el-image>
          </template>
        </el-table-column>

        <el-table-column prop="fraction" label="分数"> </el-table-column>
        <el-table-column prop="biopsyId" label="切片id"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column prop="biopsyName" label="切片名"> </el-table-column>
        <el-table-column prop="createUser" label="创建用户"> </el-table-column>
        <el-table-column label="分析状态"
          ><template slot-scope="scope">{{
            scope.row.status == 0
              ? "待分析"
              : scope.row.status == 1
              ? "分析中"
              : scope.row.status == 2
              ? "分析完成"
              : scope.row.status == 3
              ? "分析失败"
              : ""
          }}</template>
        </el-table-column>
        <el-table-column prop="reasonForFailure" label="失败原因">
        </el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="resetOnePoint(scope.row)"
              >回显</el-button
            >
            <el-button size="mini" type="text" @click="deletePoint(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import qs from "qs";
import _ from "lodash";
import $ from "jquery";
import jcanvasFactory from "./Viewer/jcanvas";
import html2canvas from "./Viewer/html2canvas";
import OpenSeadragon from "./components/OpenSeadragon/OpenSeadragon";
import DiagnosisList from "./Viewer/ViewerDiagnosisList";
import AIFloating from "./Viewer/AIFloating";
import AiTct from "./Viewer/AiTct.vue";
import SliceInfo from "./Viewer/SliceInfo";
import HotKey from "./Viewer/Hotkey";
import DiagnosisDetail from "./components/DiagnosisDetail";
import DiagnosisDetailClinical from "./components/DiagnosisDetailClinical";
import Analysis from "./Viewer/Analysis";
import BaseTable from "@templates/components/BaseTable";
import Client from "../../server/client";
import Diagnosis from "./Diagnosis/Diagnosis.vue";
import DiagnosisResultStatisticsComp from "@templates/components/diagnosisResultStatisticsComp.vue";
import ViewerDiagnosticBasis from "@/client/templates/Viewer/ViewerDiagnosticBasis";
import { vxRule } from "../libs/validator";
import VueDragResize from "vue-drag-resize";
export default {
  components: {
    OpenSeadragon,
    DiagnosisList,
    DiagnosisDetail,
    DiagnosisDetailClinical,
    AIFloating,
    AiTct,
    SliceInfo,
    HotKey,
    Analysis,
    BaseTable,
    Diagnosis,
    DiagnosisResultStatisticsComp,
    ViewerDiagnosticBasis,
    VueDragResize,
  },
  data() {
    return {
      //九宫格
      //   isShow: false,
      //   cellSize: 1,
      //   // 修改
      //   originCellCol: 1, // 记录放大之前的格式
      //   originCellRow: 1,
      //   imgZoomStatus: undefined,
      //   originCellKey: undefined, // 记录放大之前的图片key值
      //   showCols: 1,
      //   showRows: 1,
      //   currentPath: undefined,
      //   cellItemStyle: {
      //     width: "0px",
      //     height: "0px",
      //   },
      //   gridLayoutTool: [
      //     {
      //       icon: "iconfont icon-gridlayout",
      //       text: "布局",
      //       location: "first",
      //       func: "changeLayout",
      //     },
      //   ],

      clinicalDialogVisible: false,
      mhDialogVisible: false,
      MHData: [],
      isCollected: null,
      newTimer: "",
      openseadragonIsShow: false,
      tiles: [
        {
          scaleFactors: [1, 4, 16],
          width: 440,
          height: 540,
        },
      ],
      sourceType:
        this.$route.query.fileName.indexOf("sdpc") >= 0 ? "IIIF" : "DZI",
      imageInfo: {
        width: 21120,
        height: 77760,
        maxLevel: 0,
        curScale: 0,
      },
      currentDeg: 0,
      userName: this.$store.state.user.name,
      currentSuspicious: {}, //当前可疑点
      switchValue: {
        scale: true,
        zoom: true,
        disc: true,
        markLabel: true,
        AIAnalysis: true,
        patientId: true,
        navigator: true,
        net: false,
        isFlicker: false, //控制标注闪烁
        groupMark: false, //成组标注开关
      },
      isFullScreen: true,
      isSlicePanelShow: false,
      isPencilPanelShow: false,
      isColorPanelShow: false,
      isSwitchPanelShow: false,
      coordinateColor: {
        red: 50,
        blue: 50,
        gama: 100,
        yellow: 50,
        contrast: 100,
        light: 50,
      },
      //传给组件diagnosisdetail组件的值，快捷键调出子组件对应的tab-item
      activeTabItem: "tabBase",
      clinicalActiveTab: "tabGastroscopeReport",
      // 左侧切片图片样式
      styleObject: {
        cursor: "pointer",
        position: "relative",
        isDisplay: "inline",
        width: "200px",
      },
      styleObjectClass: {
        left: "-100px",
      },
      yinYangIcons: [],
      biopsyList: [],

      biopsyId: this.$route.query.biopsyId,
      newBiopsyid: this.$route.query.biopsyId, //根据扫描员点击上一张下一张变的切片id
      biopsyOriginFilename: this.$route.query.originFilename,
      biopsyName: this.$route.query.fileName,
      labelUrl: "",
      annotationsDataInit: [],
      ifhideCallout: false,
      active: false,
      // 标注提示
      mark: {
        warning: "",
        remark: "",
      },
      markRules: {
        warning: [
          vxRule(true, null, "blur", "请填写标注笔记"),
          vxRule(
            true,
            "length",
            "blur",
            "标注笔记填写请不要超过255个字符",
            null,
            255
          ),
        ],
        remark: [
          vxRule(true, null, "blur", "请填写备注内容"),
          vxRule(
            true,
            "length",
            "blur",
            "备注内容填写请不要超过255个字符",
            null,
            255
          ),
        ],
      },
      newannotations: [],
      newPic: "",
      // 组件AI数据
      F3info: null,
      F3AnalysisInfo: "",
      AIdata: null,
      SliceInfoData: null,
      drawer: false,
      Ifanalysis: false,
      experimentDialog: false,

      AIEvaluationDialogListTableData: [],
      operation: [
        {
          label: "查看详情",
          color: "red",
          functionKey: "watchDetail",
        },
      ],
      pageInfo: {
        page: 1,
        size: 15,
        total: 0,
      },
      AIEvaluationDialogListTableHeader: [
        {
          label: "切片id",
          prop: "biopsyId",
          width: "180",
        },
        {
          label: "切片名称",
          prop: "sliceName",
          width: "180",
        },
        {
          label: "阴阳性（AI）",
          prop: "masculineAi",
          width: "180",
        },
        {
          label: "阴阳性（专家）",
          prop: "expertAdvice",
          width: "180",
        },
        {
          label: "创建医生",
          prop: "createUser",
          width: "180",
        },
        {
          label: "创建时间",
          prop: "createTime",
          width: "180",
        },
        {
          label: "更新医生",
          prop: "updateUser",
          width: "180",
        },
        {
          label: "更新时间",
          prop: "updateTime",
          width: "180",
        },
        {
          label: "慢性炎症（AI）",
          prop: "chronicInflammationAi",
          width: "180",
        },
        {
          label: "慢性炎症（专家）",
          prop: "chronicInflammationExpertAdvice",
          width: "180",
        },
        {
          label: "肠化（AI）",
          prop: "imAi",
          width: "180",
        },
        {
          label: "肠化（专家）",
          prop: "imExpertAdvice",
          width: "180",
        },
        {
          label: "萎缩（AI）",
          prop: "atrophyAi",
          width: "180",
        },
        {
          label: "萎缩（专家）",
          prop: "atrophyExpertAdvice",
          width: "180",
        },
        {
          label: "活动性（AI）",
          prop: "activityAi",
          width: "180",
        },
        {
          label: "活动性（专家）",
          prop: "activityExpertAdvice",
          width: "180",
        },
        {
          label: "HP（AI）",
          prop: "hpai",
          width: "180",
        },
        {
          label: "HP（专家）",
          prop: "hpexpertAdvice",
          width: "180",
        },
        {
          label: "异性增生（AI）",
          prop: "alienGrowthAi",
          width: "180",
        },
        {
          label: "异性增生（专家）",
          prop: "alienGrowthExpertAdvice",
          width: "180",
        },
        {
          label: "备注",
          prop: "remark",
          width: "180",
        },
      ],
      EvaluationFormFilter: {
        pathologyId: this.$route.query.pathologyId,
        biopsyId: this.$route.query.biopsyId,
      },
      AIEvaluationForm: {
        pathologyId: "",
        biopsyId: "",
        sliceName: "",
        masculineAi: "",
        expertAdvice: "",
        remark: "",
        chronicInflammationAi: "",
        chronicInflammationExpertAdvice: "",
        imAi: "",
        imExpertAdvice: "",
        atrophyAi: "",
        atrophyExpertAdvice: "",
        activityAi: "",
        activityExpertAdvice: "",
        hpai: "",
        hpexpertAdvice: "",
        alienGrowthAi: "",
        alienGrowthExpertAdvice: "",
        evaluateExpert: "",
        evaluateTime: "",
        radio: "",
        other: "",
      },
      freezeTypeList: [], //冰冻类型字典
      AIEvaluationFormList: {
        expertAdviceList: [],
        yinyangOpinion: [
          {
            name: "阴性",
            id: 0,
          },
          {
            name: "阳性",
            id: 1,
          },
        ],
      },

      qualityEvaluationForm: {
        biopsyQuality: "",
        scanDefinition: "",
        scanNumber: "", //切片号
        serialNumber: "", //切片序号
        currentSerialNumber: "", //当前第几张/共多少张
        biopsyId: this.$route.query.biopsyId,
      },
      qualityEvaluationShow: false,
      dictionaryMap: [
        {
          code: "sliceQuality",
          array: "biopsyQualityList",
        },
        {
          code: "scanningQuality",
          array: "scanQualityList",
        },
        {
          code: "countOfTransferPostiveToNegative",
          array: "countOfTransferPostiveToNegativeList",
        },
      ],
      biopsyQualityList: [],
      scanQualityList: [],
      countOfTransferPostiveToNegativeList: [],

      isAllowDrawLine: false,
      btnSureShow: true,
      changeColor: -1,
      hotkey: false,
      visibleDict: {
        patienterList: false, //诊断列表
        patienterDetail: false, // 诊断详情
        AIEvaluationDialogList: false, //AI分析列表
        isShowSliceInfoStatus: false, // 切片信息
        AIEvaluationDialog: false, //AI分析准确性评价
        annotationsWarn: false, //画笔标注
      },
      pathologyServiceURL: process.env.pathologyServiceURL,
      AnnotationsServiceURL: process.env.pathologyServiceURL,
      ImageServiceURL: process.env.ImageServiceURL,
      info: "", //病人信息
      bgColor: "", //综合分析红点绿点
      aiAnnotationsData: [], //胃镜aipoints
      tctPartOfGroup: {
        arrayASCUS: [], //tct ASCUS aipoints
        arrayASCH: [], //tct ASCH aipoints
        arrayLSIL: [], //tct LSIL  aipoints
        arrayHSIL: [], //tct HSIL aipoints
      },

      annotationsData: [],
      pencilActive: false,
      polygonActive: false,
      rectangleActive: false,
      measureDistanceActive: false,
      measureAreaActive: false,
      flag: true,
      timer: null,
      timerOne: null,
      viewerAngle: 0,
      viewerAngleCopy: 90,
      viewZoomNumber: 1,
      annDialogVisible: false,

      diagnosisIdMock: 0,
      updateAnnInfo: {
        annotationId: "",
        width: "",
        height: "",
        saveUserName: "",
        createAt: "",
        area: "",
      },
      showleftPic: true,
      diagnosisId: null,
      currentLevelLabel: null,
      loading: false,
      prevPathologyId: null,
      nextPathologyId: null,
      ifOpenseadragon: true,
      pathologyId: this.$route.query.pathologyId,
      collectionAnnotationImages: null,
      annotationImages: [],
      initWidth: 0,
      initHeight: 0,
      initX: 0,
      initY: 0,
      isActive: 0,
      specimenType: null,
      diagnosticBasisData: {
        showStatus: false,
      },
      dziUrl: this.pathologyServiceURL + this.$route.query.dzi,
      groupMark: { note: null, remark: null }, //成组标注存放的标注笔记与标注内容
      w: document.documentElement.clientWidth,
      h: document.documentElement.clientHeight - 50,

      mhAnnotationsData: [],
      mhAnnotationsDataDrawEnd: [],
      urlHaspDiagnosisType: this.$route.query.pDiagnosisType,
    };
  },

  methods: {
    getBioList() {
      let res = [];
      if (this.cellSize <= 1) {
        // res.push(this.currentPath);
        res.push({ newFilename: this.$route.query.fileName });
      } else {
        res = this.biopsyList.slice(0, this.cellSize);
      }
      console.log(res, this.biopsyList);
      return res;
    },
    jumpToCell(val) {
      this.currentPath = val;
      this.selectedGrid({
        col: 1,
        row: 1,
      });
      this.$refs.openseadragon[0].open(this.getPath(val.newFilename));
    },
    getPath(fileName) {
      if (fileName.indexOf("sdpc") >= 0) {
        return `${this.pathologyServiceURL}/images/${fileName}`;
      }
      return `${this.pathologyServiceURL}/images/${fileName}.dzi`;
    },
    getId(val) {
      return `open-sea-dragon${val}`;
    },
    // 九宫格
    selectedGrid(params) {
      console.log(params);
      this.originCellCol = this.showCols = params.col;
      this.originCellRow = this.showRows = params.row;
      this.cellSize = params.col * params.row;

      this.generateGrid(this.showRows, this.showCols);
    },
    generateGrid(rows, cols) {
      console.log(rows, cols);
      // 只要布局状态发生改变，所有的工具都恢复默认
      this.changeColor = -1;
      // 生成选择布局
      // 三个格子在一行，有3 * 2条border， 每条border宽1px, 所以总宽减去所有border的size，剩下位置三等分，就是每个item的宽了
      // 由于是矩形，高度也类似
      const freeBorderSize = cols * 2;
      this.cellItemStyle.width = `calc(${100 / cols}% - ${
        freeBorderSize / cols
      }px)`;
      this.cellItemStyle.height = `calc(${100 / rows}% - ${
        (freeBorderSize + 50) / rows
      }px)`;

      // 重制dicom viewer
      this.$nextTick(() => {
        if (this.$refs.openseadragon) {
          // 格子布局渲染后顺序执行，防止找不到对应的ref
          const refLength = this.$refs.openseadragon.length;
          for (let i = 0; i < refLength; i++) {
            if (this.cellSize > 1) {
              this.$refs.openseadragon[i].normalToolSwitch(
                "rulerOrScale",
                false
              );
              this.$refs.openseadragon[i].open(
                this.getPath(this.biopsyList[i].newFilename)
              );
            }
            console.log(this.$refs.openseadragon[i], "ceshi+" + i);
            this.$refs.openseadragon[i].measuring.reDraw(1);
          }
        }
      });
    },
    addMouseWheelListener(element, callback) {
      // 接收字符串，DOM对象，JQuery对象等多种格式
      element = TypeModule.toHtmlElement(element);
      ["mousewheel", "DOMMouseScroll"].forEach((eventType) => {
        element.addEventListener(eventType, (event) => {
          event = event || window.event;
          const dy = event.wheelDelta || event.detail * -40;
          callback(dy);
        });
      }, true);
    },

    // 修改布局
    gridLayout() {
      if (this.changeColor === 26) {
        this.changeColor = -1;
      } else {
        this.changeColor = 26;
        
            const { state } = this.$store;
            const { href } = this.$router.resolve({
                name: 'ViewerCompare',
                path: '/Viewer-compare',
                query: {
                    fileName: this.$route.query.fileName,
                    originFilename: this.$route.query.originFilename,
                    pathologyId: this.$route.query.pathologyId,
                    biopsyId: this.$route.query.biopsyId,
                    authorization: state.authorization,
                    userId: state.user.id,
                    pDiagnosisType: sessionStorage.getItem('pDiagnosisType'),
                },
            });
            const width = window.screen.availWidth + 10;
            const height = window.screen.availHeight + 10;
            window.open(
                href,
                'viewerCompare',
                `location=no,width=${width},height=${height}`
            );
            console.log('1111-----');
        
      }
    },
    resize(newRect) {
      this.width = newRect.width;
      this.height = newRect.height;
      this.top = newRect.top;
      this.left = newRect.left;
    },
    //获取强生图片宽高
    getImageInfo(filename) {
      this.$axios({
        method: "GET",
        url: `${this.AnnotationsServiceURL}/images/info/${filename}`,
      }).then((res) => {
        if (res && res.data.code === 200) {
          const result = res.data.data;
          this.imageInfo.height = result.imageHeight;
          this.imageInfo.width = result.imageWidth;
          this.imageInfo.maxLevel = result.maxLevel;
          this.imageInfo.curScale = result.curScale;
          this.tiles[0].height = result.tileHeight;
          this.tiles[0].width = result.tileWidth;
          this.newTimer = new Date().getTime();
          this.openseadragonIsShow = true;
        }
      });
    },
    // 图片旋转
    imagePinwheel(e) {
      console.log(this.$refs);
      this.currentDeg += 90;
      this.$refs.IMAGE_SERVICE.style.transform = `rotate(${this.currentDeg}deg)`;
    },
    calcTotleScore(data, isShowViewerDiagnosticBasis) {
      this.bgColor = data;
      // this.diagnosticBasisData.showStatus = isShowViewerDiagnosticBasis;
    },
    //切片重扫      请求后此切片会从服务器文件夹里删除，但是记录仍在
    sliceRescan() {
      this.$confirm(
        "如果重扫切片，此切片将删除，此条诊断记录不会出现在任务列表内，等扫描员将此切片补扫成功后，此条诊断记录会自动出现在任务列表。需要通知扫描员重新扫描此切片吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let mData = {
            biopsyId: this.newBiopsyid,
            sliceQualityStatus: 2,
            scanDefinition: "需重扫",
          };
          this.$axios({
            method: "POST",
            url: `/PROXY-Remote/biopsy/slice/qualityEvaluate`,
            data: mData,
          }).then((res) => {
            if (res && res.data.code === 200) {
              this.$message.success("已通知扫描员重扫此切片");
            } else {
              this.$message.warning(res.data.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消重扫",
          });
        });
    },
    //根据切片id拿到切片信息
    getSliceInfoInfo(biopsyId) {
      this.$axios({
        method: "GET",
        url: `/PROXY-Remote/biopsy/sliceQualityEvaluateSingleBiopsyInformation/${biopsyId}`,
      }).then((res) => {
        if (res && res.data.code === 200) {
          this.SliceInfoData = res.data.data[0];
          this.qualityEvaluationForm.serialNumber = "";
          this.labelUrl = this.SliceInfoData.labelUrl || "";
        } else {
          this.$message.info(res.data.message);
        }
      });
    },
    //准确阴阳性判断
    correctYinYang() {
      this.AIEvaluationForm.expertAdvice = this.AIEvaluationForm.masculineAi;
      this.putExpertOpinion();
    },
    //错误阴阳性判断
    errorYinYang() {
      if (this.AIEvaluationForm.masculineAi == "阳性") {
        this.AIEvaluationForm.expertAdvice = "阴性";
      } else if (this.AIEvaluationForm.masculineAi == "阴性") {
        this.AIEvaluationForm.expertAdvice = "阳性";
      } else {
        this.AIEvaluationForm.expertAdvice = "";
      }
      this.putExpertOpinion();
    },
    //医生第一次打开病人切片浏览器的时间
    doctorOpenViewerTime(pBiopsyid) {
      this.$axios({
        methods: "GET",
        url: `/PROXY-Remote/biopsy/recordStartDiagnosisTime/${pBiopsyid}/${this.$route.query.userId}`,
      }).then((res) => {
        console.log("打开切片浏览器", res);
      });
    },
    //医生最后提交评价的时间
    doctorSubmitEvaluationTime(pBiopsyid) {
      this.$axios({
        methods: "GET",
        url: `/PROXY-Remote/biopsy/recordEndDiagnosisTime/${pBiopsyid}/${this.$route.query.userId}`,
      }).then((res) => {
        console.log("提交评价", res);
      });
    },
    //当前第几张/共多少张
    sliceQualityEvaluateRank() {
      let mData = {
        keyWord: this.$route.query.searchPathologyId,
        pid: this.newBiopsyid,
        //pupAndDown: '',
        slicePurpose: this.$route.query.slicePurpose,
        sliceQualityStatus: this.$route.query.sliceQualityStatus,
      };
      this.$axios({
        method: "POST",
        url: `/PROXY-Remote/biopsy/sliceQualityEvaluateRank`,
        data: mData,
      }).then((res) => {
        if (res && res.data.code === 200) {
          this.qualityEvaluationForm.currentSerialNumber = res.data.data;
        } else {
          this.$message.info(res.data.message);
        }
      });
    },
    //通过切片序号找切片
    findSliceByCurrentBiopsyCount() {
      if (this.qualityEvaluationForm.serialNumber == "") {
        this.$message.info("请输入切片序号");
      } else {
        let mData = {
          keyWord: this.$route.query.searchPathologyId,
          pid: this.newBiopsyid,
          pcurrentBiopsyCount: Number(this.qualityEvaluationForm.serialNumber),
          slicePurpose: this.$route.query.slicePurpose,
          sliceQualityStatus: this.$route.query.sliceQualityStatus,
        };
        this.$axios({
          method: "POST",
          url: `/PROXY-Remote/biopsy/findSliceByCurrentBiopsyCount`,
          data: mData,
        }).then((res) => {
          if (res && res.data.code === 200) {
            this.newBiopsyid = res.data.data.id;
            this.$refs.openseadragon.open(
              `${this.pathologyServiceURL}/images/${res.data.data.newFilename}.dzi`
            );
            this.getBiopsyAssess(this.newBiopsyid);
            this.sliceQualityEvaluateRank();
            this.getSliceInfoInfo(this.newBiopsyid);
            this.$message.success("成功找到此切片");
          } else {
            this.$message.info(res.data.message);
          }
        });
      }
    },

    //上一张
    scanerPrev() {
      let mData = {
        keyWord: this.$route.query.searchPathologyId,
        pid: this.newBiopsyid,
        pupAndDown: "up",
        slicePurpose: this.$route.query.slicePurpose,
        sliceQualityStatus: this.$route.query.sliceQualityStatus,
      };
      this.$axios({
        method: "POST",
        url: `/PROXY-Remote/biopsy/findNextAndPreviousBiopsy`,
        data: mData,
      }).then(async (res) => {
        if (res && res.data.code === 200) {
          this.newBiopsyid = res.data.data.id;
          const filename = res.data.data.newFilename;
          this.getBiopsyAssess(this.newBiopsyid);
          this.sliceQualityEvaluateRank();
          this.getSliceInfoInfo(this.newBiopsyid);
          const isSdpc = filename.endsWith("sdpc");
          this.sourceType = isSdpc ? "IIIF" : "DZI";
          this.dziUrl = `${this.pathologyServiceURL}/images/${filename}.dzi`;
          if (isSdpc) {
            await this.getImageInfo(filename);
          } else {
            this.openseadragonIsShow = false;
            this.newTimer = new Date().getTime();
            this.openseadragonIsShow = true;
            // this.$refs.openseadragon.open(
            //     `${this.pathologyServiceURL}/images/${filename}.dzi`
            // );
          }
          this.$message.success("上一张切换成功");
        } else if (res.data.code === 404) {
          this.$message.info(res.data.message);
        }
      });
    },
    //下一张
    scanerNext() {
      let mData = {
        keyWord: this.$route.query.searchPathologyId,
        pid: this.newBiopsyid,
        pupAndDown: "down",
        slicePurpose: this.$route.query.slicePurpose,
        sliceQualityStatus: this.$route.query.sliceQualityStatus,
      };
      this.$axios({
        method: "POST",
        url: `/PROXY-Remote/biopsy/findNextAndPreviousBiopsy`,
        data: mData,
      }).then(async (res) => {
        if (res && res.data.code === 200) {
          this.newBiopsyid = res.data.data.id;
          const filename = res.data.data.newFilename;
          this.getBiopsyAssess(this.newBiopsyid);
          this.sliceQualityEvaluateRank();
          this.getSliceInfoInfo(this.newBiopsyid);
          const isSdpc = filename.endsWith("sdpc");
          this.sourceType = isSdpc ? "IIIF" : "DZI";
          this.dziUrl = `${this.pathologyServiceURL}/images/${filename}.dzi`;

          if (isSdpc) {
            await this.getImageInfo(filename);
          } else {
            this.openseadragonIsShow = false;
            this.newTimer = new Date().getTime();
            this.openseadragonIsShow = true;
            // this.$refs.openseadragon.open(
            //     `${this.pathologyServiceURL}/images/${filename}.dzi`
            // );
          }
          this.$message.success("下一张切换成功");
        } else if (res.data.code === 404) {
          this.$message.info(res.data.message);
        }
      });
    },

    //扫描员此切片需要重扫
    rescan() {
      let mData = {
        biopsyId: this.newBiopsyid,
        sliceQualityStatus: 2,
        scanDefinition: "需重扫",
      };
      this.$axios({
        method: "POST",
        url: `/PROXY-Remote/biopsy/slice/qualityEvaluate`,
        data: mData,
      }).then((res) => {
        if (res && res.data.code === 200) {
          this.$message.success("提交重新扫描成功");
          this.scanerNext();
        }
      });
    },
    getBiopsyAssess(biopsyId) {
      this.$axios({
        method: "get",
        url: `/biopsy/findByIdOfSliceQualityEvaluate/${biopsyId}`,
      }).then((res) => {
        if (res && res.data.code === 200) {
          this.qualityEvaluationForm.biopsyQuality =
            res.data.data.biopsyQuality || "";
          this.qualityEvaluationForm.scanDefinition =
            res.data.data.scanDefinition || "";
          this.labelUrl = res.data.data.labelUrl || "";
        }
      });
    },
    //切片质量可以 直接通过提交并跳到下一张
    scanQualityPass() {
      let mData = {
        biopsyId: this.newBiopsyid,
        biopsyQuality: "甲",
        scanDefinition: "甲",
      };
      this.$axios({
        method: "POST",
        url: `/PROXY-Remote/biopsy/slice/qualityEvaluate`,
        data: mData,
      }).then((res) => {
        if (res && res.data.code === 200) {
          this.$message.success("提交成功");
          this.scanerNext();
        }
      });
    },
    //扫描员提交切片质量
    submitEvaluate() {
      let mData = {
        biopsyId: this.newBiopsyid,
        biopsyQuality: this.qualityEvaluationForm.biopsyQuality,
        scanDefinition: this.qualityEvaluationForm.scanDefinition,
      };
      if (mData.scanDefinition === "需重扫") {
        mData.sliceQualityStatus = 2;
      }
      this.$axios({
        method: "POST",
        url: `/PROXY-Remote/biopsy/slice/qualityEvaluate`,
        data: mData,
      }).then((res) => {
        if (res && res.data.code === 200) {
          this.$message.success("提交成功");
          this.getSliceInfoInfo(this.newBiopsyid);
        }
      });
    },
    search() {
      this.getAIEvaluationList();
    },
    watchDetail(row) {
      this.btnSureShow = false;
      this.$axios({
        method: "get",
        url: `/PROXY-Remote/evaluate/get/${row.id}`,
      }).then((res) => {
        if (res && res.data.code === 200) {
          this.AIEvaluationForm = res.data.data;
          this.visibleDict.AIEvaluationDialog = true;
        }
      });
    },
    exampleTableButtonClick(functionKey, row) {
      this[functionKey](row);
    },
    exampleTablePageJumpTo(val) {
      this.pageInfo.page = val;
      // 为 exampleTable.data 赋值相应页上新数据
      this.getAIEvaluationList();
    },
    exampleTableSizeChange(val) {
      this.pageInfo.size = val;
      // 为 exampleTable.data 赋值相应数据量新数据
      this.getAIEvaluationList();
    },
    getAIEvaluationList() {
      this.$axios({
        method: "post",
        url: "/PROXY-Remote/evaluate/findAll",
        data: {
          page: this.pageInfo.page - 1,
          size: this.pageInfo.size,
          biopsyId: this.EvaluationFormFilter.biopsyId,
          pathologyId: this.EvaluationFormFilter.pathologyId,
        },
      }).then((res) => {
        if (res && res.data.code === 200) {
          this.AIEvaluationDialogListTableData = res.data.data;
          this.pageInfo.page = res.data.pageInfo.page + 1;
          this.pageInfo.size = res.data.pageInfo.size;
          this.pageInfo.total = res.data.pageInfo.total;
        }
      });
    },
    copyAiAnalysis() {
      this.AIEvaluationForm.expertAdvice = this.AIEvaluationForm.masculineAi;
      this.AIEvaluationForm.chronicInflammationExpertAdvice =
        this.AIEvaluationForm.chronicInflammationAi;
      this.AIEvaluationForm.imExpertAdvice = this.AIEvaluationForm.imAi;
      this.AIEvaluationForm.atrophyExpertAdvice =
        this.AIEvaluationForm.atrophyAi;
      this.AIEvaluationForm.activityExpertAdvice =
        this.AIEvaluationForm.activityAi;
      this.AIEvaluationForm.hpexpertAdvice = this.AIEvaluationForm.hpai;
      this.AIEvaluationForm.alienGrowthExpertAdvice =
        this.AIEvaluationForm.alienGrowthAi;
      this.putExpertOpinion();
    },
    dictionariesRequest(dictMap) {
      // 字典数据请求
      dictMap.forEach(async (map) => {
        const res = await this.$axios({
          method: "GET",
          url: "/PROXY-Remote/dicts/list",
          params: {
            code: map.code,
            page: 0,
            size: 99,
          },
        });

        if (res && res.data.code === 200) {
          const result = res.data;
          result.data.forEach((t) => {
            this[map.array].push({
              id: t.id,
              label: t.name,
            });
          });
        }
      });
    },
    putExpertOpinion() {
      let _this = this;
      if (
        this.AIEvaluationForm.expertAdvice == "阳性" &&
        this.AIEvaluationForm.radio == ""
      ) {
        this.$message.info("请选择专家诊断");
        return;
      }
      this.AIEvaluationForm.biopsyId = this.biopsyId;
      this.$axios({
        method: "put",
        url: "/PROXY-Remote/evaluate/save",
        data: this.AIEvaluationForm,
      }).then(
        (res) => {
          if (res && res.data.code === 200) {
            this.visibleDict.AIEvaluationDialog = false;
            this.$message.info("提交成功");
            this.getAIEvaluationList();
            this.doctorSubmitEvaluationTime(_this.biopsyId);
          } else {
            this.$message.info(res.data.message);
          }
        },
        (err) => {
          this.$message.info(`提交失败  ${err.response.data.message}`);
        }
      );
    },

    expertOpinion() {
      this.$axios({
        method: "GET",
        url: "/PROXY-Remote/dicts/list",
        params: {
          code: "expertAdvice",
          page: 0,
          size: 99,
        },
      }).then((res) => {
        if (res && res.data.code === 200) {
          this.AIEvaluationFormList.expertAdviceList = res.data.data;
        }
      });
    },
    closeAIDialog() {
      this.visibleDict.AIEvaluationDialog = false;
      this.changeColor = -1;
      const _this = this;
      document.addEventListener("keydown", _this.watchEnter);
    },
    closeExperimentDialog() {},
    closeAIEvaluationDialog() {
      this.visibleDict.AIEvaluationDialog = false;
      this.changeColor = -1;
    },
    annotationSelect(item) {
      let _this = this;
      _this.$refs.AIFloatingREF.locatedToParticularIndex(item);
    },
    becomeFullScreen() {
      if (this.isFullScreen) {
        this.isFullScreen = false;
      } else {
        this.isFullScreen = true;
      }
    },
    pictureToolPanelShow(type) {
      if (type == 1) {
        this.isSlicePanelShow = !this.isSlicePanelShow;
        this.isColorPanelShow = false;
        this.isPencilPanelShow = false;
        this.isSwitchPanelShow = false;
        if (this.isSlicePanelShow) {
          this.changeColor = 30;
        } else {
          this.changeColor = -1;
        }
      }
      if (type == 2) {
        this.isSlicePanelShow = false;
        this.isColorPanelShow = false;
        this.isSwitchPanelShow = false;
        this.isPencilPanelShow = !this.isPencilPanelShow;
        if (this.isPencilPanelShow) {
          this.changeColor = 29;
        } else {
          this.changeColor = -1;
        }
      }
      if (type == 3) {
        this.isSlicePanelShow = false;
        this.isColorPanelShow = !this.isColorPanelShow;
        this.isPencilPanelShow = false;
        this.isSwitchPanelShow = false;
        if (this.isColorPanelShow) {
          this.changeColor = 31;
        } else {
          this.changeColor = -1;
        }
      }

      if (type == 4) {
        this.isSlicePanelShow = false;
        this.isColorPanelShow = false;
        this.isPencilPanelShow = false;
        this.isSwitchPanelShow = !this.isSwitchPanelShow;
        if (this.isSwitchPanelShow) {
          this.changeColor = 32;
        } else {
          this.changeColor = -1;
        }
      }
    },
    //对比度调节事件
    onContrastSlideChange(e) {
      this.coordinateColor.gama = 100;
      this.coordinateColor.light = 50;
      this.$refs.openseadragon.onContrastSlideChange(e);
    },
    //亮度调节事件
    onLightSlideInput(e) {
      this.coordinateColor.contrast = 100;
      this.coordinateColor.gama = 100;
      this.$refs.openseadragon.onLightSlideInput(e);
    },
    //gama调节事件
    onGamaSlideInput(e) {
      this.coordinateColor.contrast = 100;
      this.coordinateColor.light = 50;
      this.$refs.openseadragon.onGamaSlideInput(e);
    },
    //red调节事件
    onRedSlideInput(e) {},
    //yellow调节事件
    onYellowSlideInput(e) {},
    //blue调节事件
    onBlueSlideInput(e) {},
    //查询每个切片的阴性和阳性，AI智能预测的可疑点
    yinYangStatus() {
      let _this = this;
      this.biopsyList.forEach((item) => {
        // const c = item.originFilename.indexOf('.');
        // const name = item.originFilename.substring(0, c);
        const biopsyId = item.id;
        this.$axios({
          method: "GET",
          url: `${this.AnnotationsServiceURL}/annotations/results/aiprediction/${biopsyId}`,
        }).then((res) => {
          if (res.data.code === 200) {
            // 数据处理
            let predTxt = res.data.data.info.pred;
            if (_this.transferPositiveToNegative(res.data.data)) {
              predTxt = 0;
            }
            this.yinYangIcons.push({
              id: biopsyId,
              pred: predTxt,
            });
          }
          this.yinYangMatch();
        });
      });
    },
    //阴阳性匹配
    yinYangMatch() {
      this.biopsyList.forEach((item) => {
        this.yinYangIcons.forEach((icon) => {
          if (item.id == icon.id) {
            item.pred = icon.pred;
          }
        });
      });
      // this.drawerAi()
    },
    __clearAllDrawingTools() {
      if (this.pencilActive) {
        this.pencilActive = false;
        this.$refs.openseadragon.beginPencilDrawing(this.pencilActive);
      }
      if (this.polygonActive) {
        this.polygonActive = false;
        this.$refs.openseadragon.beginPolygonDrawing(this.pencilActive);
      }
      if (this.rectangleActive) {
        this.rectangleActive = false;
        this.$refs.openseadragon.beginRectangleDrawing(this.rectangleActive);
      }
      if (this.measureDistanceActive) {
        this.measureDistanceActive = false;
        this.$refs.openseadragon.beginMeasuringDistance(
          this.measureDistanceActive
        );
      }
      if (this.measureAreaActive) {
        this.measureAreaActive = false;
        this.$refs.openseadragon.beginMeasuringArea(this.measureAreaActive);
      }
    },
    togglePencilLine() {
      if (this.changeColor === 22) {
        this.changeColor = -1;
        this.cancelAnn();
      } else {
        this.changeColor = 22;
        this.__clearAllDrawingTools();
        this.pencilActive = !this.pencilActive;
        if (this.pencilActive) {
          this.$refs.openseadragon.changeDrawClass({
            color: "#b31a1a",
            name: "涂抹",
          });
        }
        this.$refs.openseadragon.beginPencilLineDrawing(this.pencilActive);
      }
    },
    toggleArrow() {
      if (this.changeColor === 23) {
        this.changeColor = -1;
        this.cancelAnn();
      } else {
        this.changeColor = 23;
        this.__clearAllDrawingTools();
        this.pencilActive = !this.pencilActive;
        if (this.pencilActive) {
          this.$refs.openseadragon.changeDrawClass({
            color: "#b31a1a",
            name: "箭头",
          });
        }
        this.$refs.openseadragon.beginArrowDrawing(this.pencilActive);
      }
    },
    togglePencil() {
      if (this.changeColor === 5) {
        this.changeColor = -1;
        this.cancelAnn();
      } else {
        this.changeColor = 5;
        this.__clearAllDrawingTools();
        this.pencilActive = !this.pencilActive;
        if (this.pencilActive) {
          this.$refs.openseadragon.changeDrawClass({
            color: "#b31a1a",
            name: "铅笔",
          });
        }
        this.$refs.openseadragon.beginPencilDrawing(this.pencilActive);
      }
    },
    MHtogglePencil() {
      if (this.changeColor === 37) {
        this.changeColor = -1;
        this.cancelAnn();
      } else {
        this.changeColor = 37;
        this.__clearAllDrawingTools();
        this.pencilActive = !this.pencilActive;
        if (this.pencilActive) {
          this.$refs.openseadragon.changeDrawClass({
            color: "#b31a1a",
            name: "铅笔",
          });
        }
        this.$refs.openseadragon.mhBeginPencilDrawing(this.pencilActive);
      }
    },
    toggleCircle() {
      if (this.changeColor === 21) {
        this.changeColor = -1;
        this.cancelAnn();
      } else {
        this.changeColor = 21;
        this.__clearAllDrawingTools();
        this.pencilActive = !this.pencilActive;
        if (this.pencilActive) {
          this.$refs.openseadragon.changeDrawClass({
            color: "#b31a1a",
            name: "圆形",
          });
        }
        this.$refs.openseadragon.beginCircleDrawing(this.pencilActive);
      }
    },
    togglePolygon() {
      if (this.changeColor === 7) {
        this.changeColor = -1;
        this.cancelAnn();
      } else {
        this.changeColor = 7;
        this.__clearAllDrawingTools();
        this.polygonActive = !this.polygonActive;
        if (this.polygonActive) {
          this.$refs.openseadragon.changeDrawClass({
            color: "#b31a1a",
            name: "铅笔",
          });
        }
        this.$refs.openseadragon.beginPolygonDrawing(this.polygonActive);
      }
    },
    toggleRectangle() {
      if (this.changeColor === 6) {
        this.changeColor = -1;
        this.cancelAnn();
      } else {
        this.changeColor = 6;
        this.__clearAllDrawingTools();
        this.rectangleActive = !this.rectangleActive;
        if (this.rectangleActive) {
          this.$refs.openseadragon.changeDrawClass({
            color: "#b31a1a",
            name: "矩形",
          });
        }

        this.$refs.openseadragon.beginRectangleDrawing(this.rectangleActive);
      }
    },
    toggleMeasureDistanceOnly(){
      if (this.changeColor === 40) {
        this.changeColor = -1;
        this.__clearAllDrawingTools();
      } else {
        this.changeColor = 40;
        this.__clearAllDrawingTools();
        this.measureDistanceActive = !this.measureDistanceActive;
        this.$refs.openseadragon.beginMeasuringDistance(
          this.measureDistanceActive,this.changeColor
        );
      }
    },
    toggleMeasureDistance() {
      if (this.changeColor === 9) {
        this.changeColor = -1;
        this.__clearAllDrawingTools();
      } else {
        this.changeColor = 9;
        this.__clearAllDrawingTools();
        this.measureDistanceActive = !this.measureDistanceActive;
        this.$refs.openseadragon.beginMeasuringDistance(
          this.measureDistanceActive,this.changeColor
        );
      }
    },
    openseadragonOpen() {
      let _this = this;
      // setTimeout(function () {
      //   if (this.drawer) {
      //     _this.$refs.AIFloatingREF.locatedToFirstAnno();
      //   }
      // }, 2000);
    },
    toggleMeasureArea() {
      if (this.changeColor === 10) {
        this.changeColor = -1;
        this.__clearAllDrawingTools();
      } else {
        this.changeColor = 10;
        this.__clearAllDrawingTools();
        this.measureAreaActive = !this.measureAreaActive;
        this.$refs.openseadragon.beginMeasuringArea(this.measureAreaActive);
      }
    },
    clearMeasure() {
      if (this.changeColor === 11) {
        this.changeColor = -1;
      } else {
        this.changeColor = 11;
        this.$refs.openseadragon.removeAllMeasureAnnotations();
        this.__clearAllDrawingTools();
        this.$refs.openseadragon.panToggle(true);
      }
    },
    goHome() {
      if (this.changeColor === 17) {
        this.changeColor = -1;
      } else {
        this.changeColor = 17;
        this.$refs.openseadragon.goHome();
      }
    },
    hideCallout() {
      if (!this.ifhideCallout) {
        this.changeColor = 8;
        this.ifhideCallout = true;
        this.annotationsDataInit = [];
      } else {
        this.ifhideCallout = false;
        this.changeColor = -1;
        this.annotationsDataInit = this.annotationsData;
      }
    },
    rotateRight() {
      this.changeColor = 18;
      if (this.viewerAngleCopy) {
        this.viewerAngle += this.viewerAngleCopy;
      } else {
        this.viewerAngle += 5;
      }
      this.viewerAngle %= 360;
      this.$refs.openseadragon.setRotation(this.viewerAngle);
    },
    rotateLeft() {
      this.changeColor = 19;
      if (this.viewerAngleCopy) {
        this.viewerAngle -= this.viewerAngleCopy;
      } else {
        this.viewerAngle -= 5;
      }
      this.viewerAngle %= 360;
      this.$refs.openseadragon.setRotation(this.viewerAngle);
    },
    // 右侧AI智能预测开关
    drawerAi() {
      if (!this.drawer && this.switchValue.AIAnalysis) {
        this.changeColor = 12;
        this.getAIAnnotations();
      } else {
        this.changeColor = -1;
        this.aiAnnotationsData = [];
        // AI定时器清除
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    drawerMHAi() {
      if (this.changeColor === 39) {
        this.changeColor = -1;
        this.mhAnnotationsData = [];
      } else {
        this.changeColor = 39;
        this.getMhAnnotations();
      }
    },
    AIEvaluationClose() {
      this.visibleDict.AIEvaluationDialogList = false;
      this.changeColor = -1;
      document.addEventListener("keydown", this.watchEnter);
    },
    AIEvaluation() {
      if (this.visibleDict.AIEvaluationDialogList) {
        this.visibleDict.AIEvaluationDialogList = false;
        this.changeColor = -1;
        document.addEventListener("keydown", this.watchEnter);
      } else {
        this.changeColor = 24;
        this.visibleDict.AIEvaluationDialogList = true;
        this.getAIEvaluationList();
        document.removeEventListener("keydown", this.watchEnter);
      }
    },
    isShowSliceInfo() {
      if (this.visibleDict.isShowSliceInfoStatus) {
        this.visibleDict.isShowSliceInfoStatus = false;
        document.addEventListener("keydown", this.watchEnter);
        this.changeColor = -1;
      } else {
        this.changeColor = 33;
        this.visibleDict.isShowSliceInfoStatus = true;
        document.removeEventListener("keydown", this.watchEnter);
      }
    },
    electronicPointer() {
      if (this.changeColor === 25) {
        this.changeColor = -1;
        this.isAllowDrawLine = false;
      } else {
        this.changeColor = 25;
        this.isAllowDrawLine = true;
      }

      const theCanvas = document.getElementById("ruler-overlay");
      theCanvas.style.cursor = "url(/images/electronicPointer.png),default";
      // const ctx = theCanvas.getContext('2d');
      // this.changeMouseInit(ctx, theCanvas);
    },
    changeMouseInit(ctx, canvas) {
      var body = [];
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      var mouse_pos_x = canvas.width;
      var mouse_pos_y = canvas.height / 2;
      var delta = 1;
      var step = 0;
      var loop = 0;
      var line = 0;
      var lineMax = 20;
      var lineMin = 5;
      var TWO_PI = 2 * Math.PI;
      var t = 0;
      var op = 1;
      var bodyLength = 20;
      canvas.addEventListener("mousemove", mouse_track);
      function mouse_track(event) {
        if (
          Math.abs(mouse_pos_x - event.clientX) > delta ||
          Math.abs(mouse_pos_y - event.clientY) > delta
        ) {
          mouse_pos_x = event.clientX;
          mouse_pos_y = event.clientY;
        }
      }
      var red = [];
      var grn = [];
      var blu = [];
      const center = 128;
      const width = 127;
      const frequency1 = 0.3;
      const frequency2 = 0.3;
      const frequency3 = 0.3;
      const phase1 = 0;
      const phase2 = 2;
      const phase3 = 4;
      for (let s = 0; s < bodyLength; s++) {
        red[s] = Math.round(Math.sin(frequency1 * s + phase1) * width + center);
        grn[s] = Math.round(Math.sin(frequency2 * s + phase2) * width + center);
        blu[s] = Math.round(Math.sin(frequency3 * s + phase3) * width + center);
      }
      var size = Math.min(canvas.width, canvas.height) / 50;
      //See below
      var startX = canvas.width;
      var startY = canvas.height / 2;
      for (let i = 0; i < bodyLength; i++) {
        body.push({
          x: startX,
          y: startY,
        });
      }
      //****** DRAW ******//
      function draw() {
        t += 0.08;
        t = t % TWO_PI;
        if (line <= lineMin) {
          op = 1;
          line = lineMin + 1;
        }
        if (line >= lineMax) {
          op = -1;
          line = lineMax - 1;
        }
        loop++;
        if (loop == 5) {
          step++;
          step = step % bodyLength;
          loop = 0;
        }

        line = op + line;
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        for (let i = body.length - 1; i > 0; i--) {
          body[i].x = body[i - 1].x;
          body[i].y = body[i - 1].y;
        }
        body[0].x = mouse_pos_x;
        body[0].y = mouse_pos_y;

        ctx.lineWidth = line;
        ctx.strokeStyle =
          "rgb(" + red[step] + "," + grn[step] + "," + blu[step] + ")";
        ctx.fillStyle =
          "rgb(" + red[step] + "," + grn[step] + "," + blu[step] + ")";
        //Draw leading circle
        ctx.beginPath();
        ctx.arc(body[0].x, body[0].y, line / 2, 0, TWO_PI);
        ctx.fill();
        //Draw line
        ctx.beginPath();
        ctx.moveTo(body[0].x, body[0].y);
        for (let s = 0; s < body.length - 2; s++) {
          //Bezier curve along points taken from:
          var xc = (body[s].x + body[s + 1].x) / 2;
          var yc = (body[s].y + body[s + 1].y) / 2;
          ctx.quadraticCurveTo(body[s].x, body[s].y, xc, yc);
        }
        ctx.stroke();
        //Draw trailing circle
        ctx.beginPath();
        ctx.arc(xc, yc, line / 2, 0, TWO_PI);
        ctx.fill();
        window.requestAnimationFrame(draw);
      }
      window.requestAnimationFrame(draw);
    },

    isShowDiagnosticBasis() {
      if (this.diagnosticBasisData.showStatus) {
        this.diagnosticBasisData.showStatus = false;
        this.changeColor = -1;
      } else {
        this.changeColor = 34;
        this.diagnosticBasisData.showStatus = true;
      }
    },
    showClinicalDialogVisible() {
      if (this.clinicalDialogVisible) {
        this.clinicalDialogVisible = false;
        this.changeColor = -1;
      } else {
        this.changeColor = 36;
        this.clinicalDialogVisible = true;
      }
    },
    AIEvaluationDialogShow() {
      if (this.visibleDict.AIEvaluationDialog) {
        this.visibleDict.AIEvaluationDialog = false;
        document.addEventListener("keydown", this.watchEnter);
      } else {
        Object.keys(this.AIEvaluationForm).forEach((key) => {
          if (
            key == "chronicInflammationAi" ||
            key == "masculineAi" ||
            key == "imAi" ||
            key == "atrophyAi" ||
            key == "activityAi" ||
            key == "hpai" ||
            key == "alienGrowthAi" ||
            key == "pathologyId" ||
            key == "evaluateExpert" ||
            key == "sliceName"
          ) {
          } else {
            this.AIEvaluationForm[key] = "";
          }
        });
        this.AIEvaluationForm.pathologyId = this.pathologyId;
        this.AIEvaluationForm.evaluateExpert = this.userName;
        this.visibleDict.AIEvaluationDialog = true;
        document.removeEventListener("keydown", this.watchEnter);
        this.btnSureShow = true;
        this.$axios({
          method: "GET",
          url: `/PROXY-Remote/evaluate/get/by/biopsy/${this.biopsyId}`,
        }).then(
          (res) => {
            if (res.data.data && res.data.code === 200) {
              this.AIEvaluationForm = res.data.data;
            }
          },
          (err) => {
            this.$message.info(err.response.data.message);
          }
        );
      }
    },
    analysisAI() {
      if (this.Ifanalysis) {
        this.Ifanalysis = false;
        this.changeColor = -1;
      } else {
        this.changeColor = 20;
        this.Ifanalysis = true;
      }
    },
    patienterListMethod() {
      this.changeColor = 2;
      this.visibleDict.patienterList = true;
      const _this = this;
      document.removeEventListener("keydown", _this.watchEnter);
    },
    DiagnosisListclosed() {
      this.visibleDict.patienterList = false;
      this.changeColor = -1;
      const _this = this;
      document.addEventListener("keydown", _this.watchEnter);
    },
    patienterDetailMethod() {
      this.changeColor = 4;
      this.visibleDict.patienterDetail = true;
      const _this = this;
      document.removeEventListener("keydown", _this.watchEnter);
      console.log("patienterDetailMethod", this.visibleDict.patienterDetail);
    },
    patienterDetailclosed() {
      this.visibleDict.patienterDetail = false;
      this.changeColor = -1;
      const _this = this;
      document.addEventListener("keydown", _this.watchEnter);
      console.log("patienterDetailclosed", this.visibleDict.patienterDetail);
    },
    selectStyle(item) {
      const _this = this;
      this.$nextTick(function () {
        this.annotationsData.forEach((item1) => {
          _this.$set(item1, "active", false);
        });
        // this.$set(item, "active", true);
      });
    },
    outStyle(item) {
      this.$set(item, "active", false);
    },
    hotkeyMethods() {
      this.changeColor = 16;
      this.hotkey = true;
    },
    hotkeyclosed() {
      this.changeColor = -1;
      this.hotkey = false;
    },
    updateDiagnoseCollection(diagnosisId) {
      this.collectionDignosis.addOrUpdate(
        this.$route.query.userId,
        {
          diagnosisId,
        },
        true
      );
    },
    getBiopsyNoPathologyId() {
      this.openseadragonIsShow = false;
      const filename = this.$route.query.fileName;
      const isSdpc = filename.endsWith("sdpc");
      this.sourceType = isSdpc ? "IIIF" : "DZI";
      this.dziUrl = `${this.pathologyServiceURL}/images/${filename}.dzi`;
      if (isSdpc) {
        this.getImageInfo(filename);
      } else {
        this.newTimer = new Date().getTime();
        this.openseadragonIsShow = true;
      }
      this.$refs.openseadragon.open(
        `${this.pathologyServiceURL}/images/${filename}.dzi`
      );
      this.ifOpenseadragon = true;
    },
    getBiopsy(id) {
      const pDiagnosisType = sessionStorage.getItem("pDiagnosisType");
      console.log("pDiagnosisType", pDiagnosisType);
      if (id != "null") {
        this.$axios({
          method: "GET",
          url: "/PROXY-Remote/diagnosis/single",
          params: {
            pathologyId: id,
            pDiagnosisType: pDiagnosisType,
          },
        }).then((res) => {
          // 请求失败
          if (res.data.code !== 200) {
            throw new Error(res.data);
          }
          // 请求成功
          const result = res.data.data;
          this.prevPathologyId = result.previousPathologyId;
          this.nextPathologyId = result.nextPathologyId;
          this.diagnosisId = result.id;
          if (result.collectionId) {
            this.isCollected = result.collectionId;
          } else {
            this.isCollected = null;
          }
          this.biopsyList = result.biopsyList;
          //   this.currentPath = result.biopsyList[0];
          this.currentLevelLabel = result.currentLevelLabel;

          this.specimenType = result.specimenType;

          //查询每个切片的阴阳性
          if (
            this.specimenType === 1577 ||
            this.specimenType === 1579 ||
            this.specimenType === 1565 ||
            this.specimenType === 1567
          ) {
            this.yinYangStatus();
          }

          // 诊断详情
          this.pathologyId = id;
          // 发送更新请求
          if (this.collectionDignosis) {
            this.updateDiagnoseCollection(this.pathologyId);
          }
          result.currentCountVersusTotal = result.currentCountVersusTotal
            ? result.currentCountVersusTotal
            : "0/0";
          this.info = `
                        <span> 当前第 </span><span style="color:#000;font-size:18px;color:#10a1df">${
                          result.currentCountVersusTotal.split("/")[0]
                        }</span><span > 例 / 共 </span><span style="color:#000;font-size:18px;color:#10a1df">${
            result.currentCountVersusTotal.split("/")[1]
          }</span><span> 例 </span>&nbsp&nbsp
                        病理号:${result.pathologyId}&nbsp&nbsp
                        <font style="padding: 0 4px; color: #F56C6C;"> ${
                          result.name ? result.name : "暂无"
                        }</font>
                        <font style="padding: 0 4px; color: #F56C6C;">${
                          result.sexName ? result.sexName : "暂无"
                        }</font>
                        <font style="padding: 0 4px; color: #F56C6C;">${
                          result.age ? result.age : "暂无"
                        }</font>
                        <font style="padding: 0 4px; color: #F56C6C;">${
                          result.ageUnitName && result.age
                            ? result.ageUnitName
                            : ""
                        }</font>
                        <font style="padding: 0 4px;">${
                          result.bedId ? result.bedId : ""
                        }</font>
                        <font style="padding: 0 4px; color: #F56C6C;"> ${
                          result.freezeTypeName ? result.freezeTypeName : ""
                        }</font>
                        检查类型:${
                          result.checkCategoryName
                            ? result.checkCategoryName
                            : ""
                        }&nbsp&nbsp
                        标本类别: ${
                          result.specimenTypeName
                            ? result.specimenTypeName
                            : "暂无"
                        }&nbsp&nbsp
                        取材脏器:${
                          result.sampleOrganName
                            ? result.sampleOrganName
                            : "暂无"
                        } &nbsp&nbsp
                        送检医生:${
                          result.sendDoctor ? result.sendDoctor : "暂无"
                        }&nbsp&nbsp
                        送检科室: 暂无 &nbsp&nbsp
                        临床诊断:${
                          result.pathologyClinicalDiagnosis
                            ? result.pathologyClinicalDiagnosis
                            : "暂无"
                        }
                        &nbsp&nbsp
                        状态:${
                          result.currentLevelLabel
                            ? result.currentLevelLabel
                            : "暂无"
                        }&nbsp&nbsp
                        取材时间:${
                          result.createTime ? result.createTime : "暂无"
                        }&nbsp&nbsp
                        `;

          // 通过切片获取标注
          if (id === this.$route.query.pathologyId) {
            result.biopsyList.forEach((element, index) => {
              if (element.newFilename === this.$route.query.fileName) {
                this.getAnnotations(
                  element.id,
                  element.newFilename,
                  element.originFilename,
                  element.labelUrl,
                  index
                );
              }
            });
          } else if (
            id !== this.$route.query.pathologyId &&
            result.biopsyList.length > 0
          ) {
            // 重新获取标注
            this.getAnnotations(
              result.biopsyList[0].id,
              result.biopsyList[0].newFilename,
              result.biopsyList[0].originFilename,
              result.biopsyList[0].labelUrl
            );
          } else {
            this.ifOpenseadragon = false;
            this.labelUrl = "";
            this.annotationsDataInit = [];
            this.annotationsData = [];
            this.$message.info("该诊断无切片");
          }
          //从上一页点哪个切片 切片浏览器哪张切片类是isActive  红框
          const index = _.findIndex(this.biopsyList, {
            id: this.biopsyId,
          });
          this.isActive = index;
        });
      }
    },

    // 界面左侧，  点击获取标注 biopsyID切片Id 切片新名字 切片老名字 切片信息图片url
    getAnnotations(
      biopsyID,
      biopsyfileName,
      biopsyOriginFilename,
      labelUrl,
      index
    ) {
      this.biopsyName = biopsyfileName;
      this.openseadragonIsShow = false;
      if (biopsyfileName !== null && biopsyOriginFilename !== null) {
        this.biopsyId = biopsyID;
        this.biopsyOriginFilename = biopsyOriginFilename;
        this.labelUrl = labelUrl;
        if (this.drawer) {
          this.getAIAnnotations();
        }
      }
      // 重新打开切片
      let myFile = "";
      this.biopsyList.forEach((item) => {
        if (item.id == biopsyID) {
          myFile = item.newFilename;
        }
      });
      this.dziUrl = `${this.pathologyServiceURL}/images/${myFile}.dzi`;
      const filename = biopsyfileName;
      const isSdpc = filename.endsWith("sdpc");
      this.sourceType = isSdpc ? "IIIF" : "DZI";
      if (isSdpc) {
        this.getImageInfo(filename);
      } else {
        this.newTimer = new Date().getTime();
        this.openseadragonIsShow = true;
      }
      if (index || index == 0) {
        this.isActive = index;
      } else {
        this.isActive = 0;
      }

      this.annotationsDataInit = [];
      this.annotationsData = [];

      this.$axios({
        method: "GET",
        url: `/PROXY-Remote/biopsy/single/${biopsyID}`,
      }).then((resp) => {
        // 请求失败
        if (resp.data.code !== 200) {
          throw new Error(resp.data);
        }
        // 请求成功
        this.AIEvaluationForm.sliceName = resp.data.data.originFilename;
        this.getSliceInfoInfo(biopsyID);
        // 数据处理
        resp.data.data.annotationsList.forEach((ele) => {
          const temPoints = [];
          const areaInfo = {
            width: ele.extraMessageJson
              ? (ele.extraMessageJson.width * 1000000).toFixed(3)
              : "",
            height: ele.extraMessageJson
              ? (ele.extraMessageJson.height * 1000000).toFixed(3)
              : "",
            area: ele.extraMessageJson
              ? (ele.extraMessageJson.area * 1000000 * 1000000).toFixed(3)
              : "",
          };
          ele.pointsJson.forEach((item) => {
            const coord1 = ["points", item[0], item[1]];
            temPoints.push(coord1);
          });
          const object = {
            annotationId: ele.id,
            createAt: ele.createTime,
            saveUser: ele.createUserId,
            remarkOne: ele.remarkOne,
            remarkTwo: ele.remarkTwo,
            classToSet: {
              color: "#b31a1a",
              name: "胃癌",
            },
            points: temPoints,
            name: "胃癌",
            children: ele.childrenJson,
            show: true,
            saveUserName: ele.createUserName,
            type: ele.extraMessageJson.type,
            imageUrl: this.ImageServiceURL + ele.imageUrl,
            extraMessageJson: ele.extraMessageJson,
            areaInfo,
          };
          this.annotationsData.push(object);
          this.annotationsDataInit = _.cloneDeep(this.annotationsData);
        });
        this.collectionAnnotationImages.addOrUpdate(
          this.$route.query.userId,
          {
            annotationsData: this.annotationsData,
          },
          true
        );
      });
      // this.$refs.openseadragon.open(
      //     `${this.pathologyServiceURL}/images/${myFile}.dzi`
      // );
      this.ifOpenseadragon = true;
      this.drawerAi();
    },
    annotationDrawingEnd(annotations) {
      annotations.forEach((temp) => {
        if (!temp.show) {
          this.newannotations.push(temp);
          this.visibleDict.annotationsWarn = true;
        }
      });
      if (this.switchValue.groupMark && !!this.groupMark.note) {
        this.mark.warning = this.groupMark.note;
        this.mark.remark = this.groupMark.remark;
      }
    },
    measureAnnotationDrawingEnd(annotations) {
      annotations.forEach((temp) => {
        if (!temp.show) {
          this.newannotations.push(temp);
          this.visibleDict.annotationsWarn = true;
        }
      });
      if (this.switchValue.groupMark && !!this.groupMark.note) {
        this.mark.warning = this.groupMark.note;
        this.mark.remark = this.groupMark.remark;
      }
    },
    //画圈请求分析
    mhAnnotationDrawingEnd(annotations) {
      this.mhAnnotationsDataDrawEnd = annotations;
      if (this.changeColor === 37) {
        this.loading = true;
        let Mpoints = [];
        annotations[annotations.length - 1].points.forEach((item) => {
          Mpoints.push({ X: item.x, Y: item.y });
        });
        console.log("Mpoints", Mpoints);
        let mData = {
          biopsyName: this.biopsyName,
          biopsyId: this.biopsyId,
          xmlText: JSON.stringify(Mpoints),
        };
        this.$axios({
          method: "POST",
          url: `/PROXY-Remote/mhIndex/tagging`,
          data: mData,
        }).then((res) => {
          if (res && res.data.code === 200) {
            this.loading = false;
            this.$message.success("分析需要耗时，请等待1分钟后再查看");
          } else {
            this.$message.warning(res.data.message);
          }
        });
      }
    },
    // 获取mh标注
    getMhAnnotations() {
      let _this = this;
      _this.loading = true;
      _this.mhAnnotationsData = [];
      this.$axios({
        method: "GET",
        url: `/PROXY-Remote/mhIndex/list/${this.biopsyId}`,
      }).then((res) => {
        if (res && res.data.code === 200) {
          let i = 1;
          res.data.data.forEach((ele) => {
            const temPoints = [];
            JSON.parse(ele.xmlText).forEach((item) => {
              const coord1 = ["points", item.X, item.Y];
              temPoints.push(coord1);
            });
            const object = {
              annotationId: i++,
              classToSet: {
                color: "#0000FF",
                name: "MH",
              },
              points: temPoints,
              name: "MH结果",
              show: true,
              type: "Polygon",
            };
            _this.mhAnnotationsData.push(object);
          });
          _this.loading = false;
        } else {
          this.$message.warning(res.data.message);
        }
      });
    },
    getMhIndexList() {
      if (this.changeColor === 38) {
        this.changeColor = -1;
      } else {
        this.changeColor = 38;
        this.cancelAnn();
        this.$refs.openseadragon.zoomJumpTo(2.5);
        let _this = this;
        _this.mhAnnotationsData = [];

        this.$axios({
          method: "GET",
          url: `/PROXY-Remote/mhIndex/list/${this.biopsyId}`,
        }).then((res) => {
          if (res && res.data.code === 200) {
            let i = 1;
            res.data.data.forEach((ele) => {
              const temPoints = [];
              JSON.parse(ele.xmlText).forEach((item) => {
                const coord1 = ["points", item.X, item.Y];
                temPoints.push(coord1);
              });
              const object = {
                annotationId: i++,
                classToSet: {
                  color: "#0000FF",
                  name: "MH",
                },
                points: temPoints,
                name: "MH结果",
                show: true,
                type: "",
              };
              _this.mhAnnotationsData.push(object);
            });

            this.MHData = res.data.data.map((item, index) => {
              return { ...item, index: index + 1 };
            });
            this.mhDialogVisible = true;
          } else {
            this.$message.warning(res.data.message);
          }
        });
      }
    },
    //MHdialog框内表格的操作 回显
    resetOnePoint(row) {
      this.mhDialogVisible = false;
      this.mhAnnotationsData = [];
      const temPoints = [];
      JSON.parse(row.xmlText).forEach((item) => {
        const coord1 = ["points", item.X, item.Y];
        temPoints.push(coord1);
      });
      const object = {
        annotationId: 1,
        classToSet: {
          color: "#0000FF",
          name: "MH",
        },
        points: temPoints,
        name: "MH结果",
        show: true,
        type: "Polygon",
      };
      this.mhAnnotationsData.push(object);

      const val = this.mhAnnotationsDataDrawEnd[row.index - 1];
      this.$refs.openseadragon.jumpToArea(
        val.data.minX,
        val.data.minY,
        val.data.minX + val.data.pixelsWidth,
        val.data.minY + val.data.pixelsHeight
      );
    },
    deletePoint(row) {
      this.$axios({
        method: "delete",
        url: `/PROXY-Remote/mhIndex/${row.id}`,
      }).then(
        (res) => {
          if (res && res.data.code === 200) {
            this.getMhAnnotations();
            this.$message.success("删除成功");
          }
        },
        (err) => {
          this.$message.info(`${err.response.data.message}`);
        }
      );
    },
    //关闭MHdialog框
    closeMHDialog() {
      this.changeColor = -1;
    },

    // 1.画画工具画笔标注， 标注完成后， 删除标注的时候触发， 2. 跳转
    aiAnnotationDrawingEnd(AIannotations) {
      console.log("1111111111111111", AIannotations);
      if (AIannotations.length > 0) {
        AIannotations.forEach((item, index) => {
          item["inIndex"] = index + 1;
        });
        this.AIdata = AIannotations;
        this.drawer = true;
        this.currentSuspicious = this.AIdata[0];
      } else {
        this.drawer = false;
      }
    },
    //  画画工具画笔标注， 点击他的时候触发
    uploadAnnotation(annotation) {
      debugger
      const { x, y, width, height } =
        annotation.option.type == "circle"
          ? annotation.circlePath.bounds
          : annotation.path.bounds;
      const imgURL = this.$refs.openseadragon.getImage(x, y, width, height);

      const MIME_TYPE = "image/png";
      const dlLink = document.createElement("a");
      //   dlLink.download = '123.png';
      this.newPic = imgURL;
      dlLink.href = imgURL;
      dlLink.dataset.downloadurl = [
        MIME_TYPE,
        dlLink.download,
        dlLink.href,
      ].join(":");

      document.body.appendChild(dlLink);
      dlLink.click();
      document.body.removeChild(dlLink);
    },
    jumpToNumber(val) {
      const pDiagnosisType = sessionStorage.getItem("pDiagnosisType");
      this.$axios({
        method: "get",
        url: `/PROXY-Remote/diagnosis/id/by/rank/${val}/${pDiagnosisType}`,
      }).then(
        (res) => {
          if (res && res.data.code === 200) {
            sessionStorage.setItem("pathologyId", res.data.data);

            this.getBiopsy(res.data.data);
          }
        },
        (err) => {
          this.$message.info(`${err.response.data.message}`);
        }
      );
    },
    // 取消标注
    cancelAnn() {
      this.__clearAllDrawingTools();
      this.$refs.openseadragon.panToggle(true);
    },
    Submit() {
      if (!this.validateForm()) {
        return;
      }
      this.groupMark.note = this.mark.warning;
      this.groupMark.remark = this.mark.remark;
      this.visibleDict.annotationsWarn = false;
      this.uploadPic(this.newPic);
    },
    // 提交标注
    submitAnnotation(uploadPictTemp) {
      const temp = this.newannotations[this.newannotations.length - 1];
      const pointsTmp = [];
      const Annotationinfo = {
        minX: temp.data.minX,
        minY: temp.data.minY,
        pixelsWidth: temp.data.pixelsWidth,
        pixelsHeight: temp.data.pixelsHeight,
        pixelsArea: temp.data.pixelsArea,
        width: temp.data.width,
        height: temp.data.height,
        area: temp.data.area,
        type: temp.option.type,
      };
      temp.points.forEach((ele) => {
        pointsTmp.push([ele.x, ele.y]);
      });
      const postdata = {
        points: JSON.stringify(pointsTmp),
        children: JSON.stringify([]),
        diagnosisId: this.diagnosisId,
        imageUrl: uploadPictTemp,
        extraMessage: JSON.stringify(Annotationinfo),
        remarkOne: this.mark.warning,
        remarkTwo: this.mark.remark,
      };
      try {
        this.$axios({
          method: "post",
          // url: `/PROXY-Remote/biopsy/${this.biopsyId}/annotations`,
          url: `/PROXY-Remote/annotations/biopsy/${this.biopsyId}/annotations`,
          data: postdata,
          headers: {
            "Content-Type": "application/json",
            authorization: this.$store.state.authorization,
          },
        }).then(
          (res) => {
            if (res && res.data.code === 200) {
              console.log(res);
              this.newannotations = [];
              this.mark.warning = "";
              this.mark.remark = "";
              const areaInfo = {
                width: res.data.data.extraMessageJson
                  ? (res.data.data.extraMessageJson.width * 1000000).toFixed(3)
                  : "",
                height: res.data.data.extraMessageJson
                  ? (res.data.data.extraMessageJson.height * 1000000).toFixed(3)
                  : "",
                area: res.data.data.extraMessageJson
                  ? (
                      res.data.data.extraMessageJson.area *
                      1000000 *
                      1000000
                    ).toFixed(3)
                  : "",
              };
              const temPoints = [];
              res.data.data.pointsJson.forEach((item) => {
                const coord1 = ["points", item[0], item[1]];
                temPoints.push(coord1);
              });
              const object = {
                annotationId: res.data.data.id,
                createAt: res.data.data.createTime,
                saveUser: res.data.data.createUserId,
                remarkOne: res.data.data.remarkOne,
                remarkTwo: res.data.data.remarkTwo,
                points: temPoints,
                classToSet: {
                  color: "#b31a1a",
                  name: "胃癌",
                },
                name: "胃癌",
                show: true,
                saveUserName: res.data.data.createUserName,
                // type: "polygon",
                type:res.data.data.extraMessageJson.type,
                imageUrl: this.ImageServiceURL + res.data.data.imageUrl,
                extraMessageJson: res.data.data.extraMessageJson,
                areaInfo,
              };
              this.annotationsData.push(object);
              this.collectionAnnotationImages.addOrUpdate(
                this.$route.query.userId,
                {
                  annotationsData: this.annotationsData,
                },
                true
              );
            }
          },
          (err) => {
            this.newannotations = [];
            this.mark.warning = "";
            this.mark.remark = "";
            this.$message.info(`新增失败 ${err.response.data.message}`);
          }
        );
      } catch (e) {
        console.log("请求失败");
      }
    },
    // 上传切片图片
    uploadPic(imgBase) {
      try {
        const data1 = { imgBase64: imgBase };
        this.$axios({
          method: "post",
          // url: "/PROXY-annotationPicService/base/upload",
          url: `${this.ImageServiceURL}/base/upload`,
          data: qs.stringify(data1),
          headers: {
            defaultHeader: false,
            "Content-Type": "application/x-www-form-urlencoded",
          },
        }).then(
          (res) => {
            if (res.data.status === "success") {
              const uploadPictTemp = res.data.url.slice(
                res.data.url.indexOf("_") - 1
              );
              console.log("upload success", res.data.url);
              console.log("uploadPictTemp", uploadPictTemp);
              this.annotationImages.push(res.data.url);
              this.submitAnnotation(uploadPictTemp);
            }
          },
          (err) => {
            this.$message.info(`标注图新增失败${err.response.data}`);
          }
        );
      } catch (e) {
        console.log("请求失败");
      }
    },
    annotationsWarnCancel() {
      this.$refs.openseadragon.panToggle(true);
      const { id } = this.newannotations[this.newannotations.length - 1];
      this.$refs.openseadragon.removeAnnotation(id);
      this.visibleDict.annotationsWarn = false;
    },
    // 全屏
    sreenFull() {
      if (
        !document.fullscreenElement &&
        !document.msFullscreenElement &&
        !document.mozFullScreenElement &&
        !document.webkitFullscreenElement
      ) {
        let docElm = document.documentElement;
        this.changeColor = 15;
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen();
        } else if (docElm.msRequestFullscreen) {
          // IE
          docElm = document.body; // overwrite the element (for IE)
          docElm.msRequestFullscreen();
        } else if (docElm.mozRequestFullScreen) {
          // 火狐
          docElm.mozRequestFullScreen();
        } else if (docElm.webkitRequestFullScreen) {
          // 谷歌
          docElm.webkitRequestFullScreen();
        }
      } else if (document.exitFullscreen) {
        this.changeColor = -1;
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      }
    },
    // 截图
    screenshot() {
      document.removeEventListener("keydown", this.watchEnter);
      this.changeColor = 13;
      $("#drawRectCanvas").show();
      const shadeCs1 = document.getElementById("shadeCanvas");
      const shadeContext1 = shadeCs1.getContext("2d");
      // 填充页面覆盖色
      shadeContext1.fillStyle = "rgba(43, 42, 42, 0.5)";
      shadeContext1.fillRect(0, 0, shadeCs1.width, shadeCs1.height);
      $("#shadeCanvas").show();
      const color = "white";
      const penWidth = 1;
      const rectCanvas = document.getElementById("drawRectCanvas");
      // canvas 的矩形框
      const canvasRect = rectCanvas.getBoundingClientRect();
      // canvas 矩形框的左上角坐标
      const canvasLeft = canvasRect.left;
      const canvasTop = canvasRect.top;
      let lastWidth = 0;
      let lastHeight = 0;
      // 要画的矩形的起点 xy
      let width = 0;
      let height = 0;
      let x = 0;
      let y = 0;
      // 鼠标点击按下事件，画图准备
      rectCanvas.onmousedown = function (e) {
        // 设置遮罩层填充色
        const shadeCs = document.getElementById("shadeCanvas");
        const shadeContext = shadeCs.getContext("2d");
        // 确定起点
        x = e.clientX;
        y = e.clientY;
        // 添加layer
        $("#drawRectCanvas").addLayer({
          type: "rectangle",
          strokeStyle: color,
          strokeWidth: penWidth,
          name: "areaLayer",
          fromCenter: false,
          x,
          y,
          width: 1,
          height: 1,
        });
        // 绘制
        $("#drawRectCanvas").drawLayers();
        $("#drawRectCanvas").saveCanvas();
        // 鼠标移动事件，画图
        // eslint-disable-next-line no-shadow
        rectCanvas.onmousemove = function (e) {
          lastWidth = width;
          lastHeight = height;
          // 要画的矩形的宽高
          width = e.clientX - canvasLeft - x;
          height = e.clientY - canvasTop - y;
          shadeContext.fillRect(x, y, lastWidth, lastHeight);
          // 清楚上一次鼠标移动画的框
          $("#drawRectCanvas").removeLayer("areaLayer");
          $("#drawRectCanvas").addLayer({
            type: "rectangle",
            strokeStyle: color,
            strokeWidth: penWidth,
            name: "areaLayer",
            fromCenter: false,
            x,
            y,
            width,
            height,
          });
          $("#drawRectCanvas").drawLayers();
          shadeContext.clearRect(x, y, width, height);
        };
      };
      const that = this;
      rectCanvas.onmouseup = function (e) {
        rectCanvas.onmousemove = null;
        width = e.clientX - canvasLeft - x;
        height = e.clientY - canvasTop - y;
        $("#drawRectCanvas").removeLayer("areaLayer");
        $("#drawRectCanvas").addLayer({
          type: "rectangle",
          strokeStyle: color,
          strokeWidth: penWidth,
          name: "areaLayer",
          fromCenter: false,
          x,
          y,
          width,
          height,
        });
        $("#drawRectCanvas").drawLayers();
        $("#drawRectCanvas").saveCanvas();
        $("#canvasToolbar").css("display", "block");
        $("#canvasToolbar").css(
          "left",
          `${width > 0 ? x + width : Math.abs(width + x) + Math.abs(width)}px`
        );
        $("#canvasToolbar").css("top", `${height > 0 ? height + y : y}px`);
        $("#drawRectCanvas").hide();
        // 移除画的选取框
        $("#drawRectCanvas").removeLayer("areaLayer");
        // 隐藏画框的canvass
        $("#drawRectCanvas").hide();
        // 添加描述输入框
        const pr = $("#prescription");
        // 横向排列
        pr.css("display", "flex"); // 横向排列
        pr.css("justify-content", "center"); // 横向排列居中
        pr.css("z-index", 9999); // 浮动在最上层
        pr.css("position", "absolute");
        pr.css("border", "none"); // 去掉边框
        pr.css(
          "font-size",
          `${(Math.abs(width) / document.body.clientWidth) * 100}%`
        ); // 文字大小
        pr.css("left", `${width > 0 ? x : Math.abs(width + x)}px`);
        pr.css("top", `${height > 0 ? height + y : y}px`);
        pr.css("width", `${Math.abs(width)}px`);
        $("#prescription").on("keydown", () => {
          if (e.keyCode === 27) {
            // $('#screenPC').trigger('click');
            $("#cancel").trigger("click");
          }
        });
        $("#SCinputBox").focus(); // 描述输入框获取焦点
        // 重置描述框的内容viewZoomNumber
        $("#rate")[0].innerText = `倍率:${
          document.getElementById("viewZoomNumber").innerText
        }`; // 倍率
        const nowDate = new Date();
        const year = nowDate.getFullYear();
        const month = `0${nowDate.getMonth() + 1}`.substr(-2, 2);
        const date = `0${nowDate.getDate()}`.substr(-2, 2);
        const hour = `0${nowDate.getHours()}`.substr(-2, 2);
        const minute = `0${nowDate.getMinutes()}`.substr(-2, 2);
        const second = `0${nowDate.getSeconds()}`.substr(-2, 2);
        $(
          "#screenshotTime"
        )[0].innerText = `${year}-${month}-${date} ${hour}:${minute}:${second}`; // 截屏时间
        $("#SCinputBox")[0].innerText = ""; // 输入框内容置空
        // 重置信息框样式框的内容
        $("#rate").css("width", "100%");
        $("#screenshotTime").css("width", "100%");
        // 判断倍率框或者日期框的字数超过1行，则重新布局
        // eslint-disable-next-line radix
        if (
          Math.ceil(
            $("#rate").height() /
              parseInt($("#rate").css("line-height").replace("px", ""))
          ) > 1 ||
          Math.ceil(
            $("#screenshotTime")
              // eslint-disable-next-line radix
              .height() /
              parseInt(
                $("#screenshotTime").css("line-height").replace("px", "")
              )
          ) > 1
        ) {
          pr.css("display", "");
          pr.css("justify-content", "");
        } else {
          $("#rate").css("width", "300px");
          $("#screenshotTime").css("width", "500px");
        }
        // 鼠标抬起
        that.initWidth = width;
        that.initHeight = height;
        that.initX = x;
        that.initY = y;
        console.log(x, y, width, height);
      };
    },
    clipImage(x, y, width, height) {
      html2canvas(document.querySelector("body"), { scale: 1, dpi: 300 }).then(
        (canvas) => {
          const scale = window.devicePixelRatio;
          const clipCanvas = document.createElement("canvas");
          clipCanvas.width = width * scale;
          clipCanvas.height = height * scale;
          const context = clipCanvas.getContext("2d");
          context.scale(1 / scale, 1 / scale);
          context.drawImage(
            canvas,
            x * scale,
            y * scale,
            width * scale,
            height * scale,
            0,
            0,
            width * scale,
            height * scale
          );
          const clipedImageBase64 = clipCanvas.toDataURL();
          const img = document.createElement("a");
          img.href = clipedImageBase64;
          img.download = `${$("#SCinputBox")[0].innerText}.jpg`;
          img.click();
        }
      );
    },
    sSuccess() {
      document.addEventListener("keydown", this.watchEnter);
      $("#canvasToolbar").css("display", "none");
      const captureX =
        this.initWidth > 0 ? this.initX : Math.abs(this.initX + this.initWidth);
      const captureY =
        this.initHeight > 0
          ? this.initY
          : Math.abs(this.initY + this.initHeight);
      this.clipImage(
        captureX,
        captureY,
        Math.abs(this.initWidth),
        Math.abs(this.initHeight) + $("#prescription").height()
      );
      const shadeCs = document.getElementById("shadeCanvas");
      const shadeContext = shadeCs.getContext("2d");
      shadeContext.clearRect(0, 0, shadeCs.width, shadeCs.height);
      $("#shadeCanvas").hide();
      $("#prescription").css("display", "none");
      this.changeColor = -1;
    },
    sCancel() {
      document.addEventListener("keydown", this.watchEnter);
      $("#canvasToolbar").css("display", "none");
      const shadeCs = document.getElementById("shadeCanvas");
      const shadeContext = shadeCs.getContext("2d");
      shadeContext.clearRect(0, 0, shadeCs.width, shadeCs.height);
      $("#shadeCanvas").hide();
      $("#prescription").css("display", "none");
      // 加上键盘监听事件
      this.changeColor = -1;
    },
    // 子组件AlFlaoting 调用
    jumpTo(val) {
      if (!!val) {
        this.currentSuspicious = val;
        console.log(val);
        this.$refs.openseadragon.jumpToArea(
          val.data.minX,
          val.data.minY,
          val.data.minX + val.data.pixelsWidth,
          val.data.minY + val.data.pixelsHeight
        );
        // AI标注闪烁
        const annotation = _.find(this.AIdata, { id: val.id });
        if (this.timer) {
          clearInterval(this.timer);
        }
        this.timer = null;
        this.flag = true;
        if (!this.timerOne) {
          this.timerOne = setInterval(() => {
            this.AnnotationOpacity(annotation);
          }, 150);
        }
        this.timer = setTimeout(() => {
          clearInterval(this.timerOne);
          this.timerOne = null;
        }, 700);
      }
    },
    // AI标注闪烁
    AnnotationOpacity(Annotation) {
      if (this.flag && this.switchValue.isFlicker) {
        Annotation.setOpacity(0);
        this.flag = false;
      } else if (this.switchValue.isFlicker) {
        Annotation.setOpacity(1);
        this.flag = true;
      }
    },
    //转化数字
    getProbablity(val) {
      var mNumber = Number(val);
      if (!isNaN(mNumber)) {
        return mNumber.toFixed(3);
      }
      return "0";
    },
    transferPositiveToNegative(value) {
      let isPositive = value.info.resultLevel.some(
        (item) => item.key === "属性" && item.value === "阳性"
      );
      let lessCount = 2;
      if (
        this.countOfTransferPostiveToNegativeList.length > 0 &&
        this.countOfTransferPostiveToNegativeList[0].label
      ) {
        lessCount = parseInt(
          this.countOfTransferPostiveToNegativeList[0].label
        );
      }
      if (!isPositive) {
        return false;
      }
      let isCountLessThanSpecifcCount = value.annotations.length <= lessCount;
      if (isCountLessThanSpecifcCount) {
        return true;
      }
      return false;
    },

    // 获取AI标注
    getAIAnnotations() {
      // const c = this.biopsyOriginFilename.indexOf('.');
      // const name = this.biopsyOriginFilename.substring(0, c);

      let _this = this;
      _this.aiAnnotationsData = [];
      _this.doctorOpenViewerTime(_this.biopsyId);
      _this
        .$axios({
          method: "GET",
          url: `${_this.AnnotationsServiceURL}/annotations/results/aiprediction/${_this.biopsyId}`,
        })
        .then((res) => {
          _this.F3AnalysisInfo = "";
          if (res.data.code === 200) {
            // 数据处理
            console.log("获取AI标注", res.data);

            if (
              _this.specimenType === 1577 ||
              _this.specimenType === 1579 ||
              this.specimenType === 1565 ||
              this.specimenType === 1567
            ) {
              _this.F3info = res.data.data.info;
              //阴性片子默认四倍放大 pred是标本类型 为胃镜病理才有的字段
              if (res.data.data.info.pred == 0) {
                setTimeout(() => {
                  _this.$refs.openseadragon.zoomJumpTo(4);
                }, 1000);
              }
              let mTransger = _this.transferPositiveToNegative(res.data.data);
              _this.F3info.resultLevel.forEach((item) => {
                if (item.key === "属性") {
                  if (mTransger) {
                    item.value = "阴性";
                  }
                  _this.AIEvaluationForm.masculineAi = item.value;
                }
                if (item.key === "肠化") {
                  _this.AIEvaluationForm.imAi = item.value;
                }
                if (item.key === "萎缩") {
                  _this.AIEvaluationForm.atrophyAi = item.value;
                }
                if (item.key === "活动性") {
                  _this.AIEvaluationForm.activityAi = item.value;
                }
                if (item.key === "慢性炎症") {
                  _this.AIEvaluationForm.chronicInflammationAi = item.value;
                }
                if (item.key === "HP") {
                  _this.AIEvaluationForm.hpai = item.value;
                }
                if (item.key === "异性增生") {
                  _this.AIEvaluationForm.alienGrowthAi = item.value;
                }

                let mStr = "";
                if (item.probablity) {
                  mStr = "(" + _this.getProbablity(item.probablity) + ")";
                }
                _this.F3AnalysisInfo +=
                  '<span style="margin-left:5px;color:#10a1df">' +
                  item.key +
                  "</span>" +
                  ':<span style="margin-left:5px;color:#10a1df">' +
                  item.value +
                  mStr +
                  "</span>";
              });
              if (!mTransger) {
                let i = 1;
                res.data.data.annotations.forEach((ele) => {
                  const temPoints = [];
                  ele.points.forEach((item) => {
                    const coord1 = ["points", item[0], item[1]];
                    temPoints.push(coord1);
                  });
                  const object = {
                    annotationId: i++,
                    classToSet: {
                      color: ele.color,
                      name: "人工智能",
                    },
                    points: temPoints,
                    name: "人工智能结果1",
                    show: true,
                    type: ele.type,
                    probablity: _this.getProbablity(ele.probability),
                  };
                  _this.aiAnnotationsData.push(object);
                });
              }
            } else if (_this.specimenType === 1578) {
              // _this.F3info.resultLevel.forEach((item) => {
              //     let mStr = '';
              //     if (item.probablity) {
              //         mStr =
              //             '(' +
              //             _this.getProbablity(item.probablity) +
              //             ')';
              //     }
              //     _this.F3AnalysisInfo +=
              //         '<span style="margin-left:5px;color:#10a1df">' +
              //         item.key +
              //         '</span>' +
              //         ':<span style="margin-left:5px;color:#10a1df">' +
              //         item.value +
              //         mStr +
              //         '</span>';
              // });
              console.log(res.data.data.annotations);
              res.data.data.annotations.forEach((item) => {
                if (item.partOfGroup === "ASC-US") {
                  this.tctPartOfGroup.arrayASCUS.push(item);
                }
                if (item.partOfGroup === "ASC-H") {
                  this.tctPartOfGroup.arrayASCH.push(item);
                }
                if (item.partOfGroup === "LSIL") {
                  this.tctPartOfGroup.arrayLSIL.push(item);
                }
                if (item.partOfGroup === "HSIL") {
                  this.tctPartOfGroup.arrayHSIL.push(item);
                }
              });
              let i = 1;
              this.tctPartOfGroup.arrayASCUS.forEach((ele) => {
                const temPoints = [];
                ele.points.forEach((item) => {
                  const coord1 = ["points", item[0], item[1]];
                  temPoints.push(coord1);
                });
                const object = {
                  annotationId: i++,
                  classToSet: {
                    // color: ele.color,
                    color: "#FF0000", //tct 默认全红
                    name: "人工智能",
                  },
                  points: temPoints,
                  name: "人工智能结果1",
                  show: true,
                  type: ele.type,
                  probablity: _this.getProbablity(ele.probability),
                };
                _this.aiAnnotationsData.push(object);
              });
            }
          }
        });
    },
    clickPartOfGroup(name) {
      let _this = this;
      _this.aiAnnotationsData = [];
      let tctArr = [];
      if (name === "ASC-US") {
        tctArr = _this.tctPartOfGroup.arrayASCUS;
      }
      if (name === "ASC-H") {
        tctArr = _this.tctPartOfGroup.arrayASCH;
      }
      if (name === "LSIL") {
        tctArr = _this.tctPartOfGroup.arrayLSIL;
      }
      if (name === "HSIL") {
        tctArr = _this.tctPartOfGroup.arrayHSIL;
      }

      let i = 1;
      tctArr.forEach((ele) => {
        const temPoints = [];
        ele.points.forEach((item) => {
          const coord1 = ["points", item[0], item[1]];
          temPoints.push(coord1);
        });
        const object = {
          annotationId: i++,
          classToSet: {
            // color: ele.color,
            color: "#FF0000", //tct 默认全红
            name: "人工智能",
          },
          points: temPoints,
          name: "人工智能结果1",
          show: true,
          type: ele.type,
          probablity: _this.getProbablity(ele.probability),
        };
        _this.aiAnnotationsData.push(object);
      });
    },
    mouseover() {
      this.styleObjectClass = {
        left: "0",
      };
    },
    mouseout() {
      this.styleObjectClass = {
        left: "-100px",
      };
    },
    viewZoom(data) {
      this.viewZoomNumber = data.toFixed(2);
    },
    handleClose() {
      this.mark.warning = "";
      this.mark.remark = "";
    },
    updateAnnotation(annotation) {
      this.mark.warning = annotation.remarkOne;
      this.mark.remark = annotation.remarkTwo;
      this.updateAnnInfo.area = annotation.areaInfo.area;
      this.updateAnnInfo.width = annotation.areaInfo.width;
      this.updateAnnInfo.height = annotation.areaInfo.height;
      this.updateAnnInfo.saveUserName = annotation.saveUserName;
      this.updateAnnInfo.createAt = annotation.createAt;
      this.updateAnnInfo.annotationId = annotation.annotationId;
      this.annDialogVisible = true;
      this.$refs.openseadragon.jumpToArea(
        annotation.extraMessageJson.minX,
        annotation.extraMessageJson.minY,
        annotation.extraMessageJson.minX +
          annotation.extraMessageJson.pixelsWidth,
        annotation.extraMessageJson.minY +
          annotation.extraMessageJson.pixelsHeight
      );
    },
    updateAnnSubmit(annotationId) {
      if (!this.validateForm()) {
        return;
      }
      const submitInfo = {
        remarkOne: this.mark.warning,
        remarkTwo: this.mark.remark,
      };
      try {
        this.$axios({
          method: "put",
          url: `/PROXY-Remote/annotations/biopsy/${this.biopsyId}/annotations/${annotationId}`,
          data: submitInfo,
          headers: {
            "Content-Type": "application/json",
          },
        }).then(
          (res) => {
            if (res && res.data.code === 200) {
              this.$message.success("更新成功");
              const index = _.findIndex(this.biopsyList, {
                id: this.biopsyId,
              });
              // if (index < this.biopsyList.length - 1) {
              if (index < this.biopsyList.length) {
                this.getAnnotations(
                  this.biopsyList[index].id,
                  this.biopsyList[index].newFilename,
                  this.biopsyList[index].originFilename,
                  this.biopsyList[index].labelUrl,
                  index
                );
              } else {
                this.getAnnotations(
                  this.biopsyList[0].id,
                  this.biopsyList[0].newFilename,
                  this.biopsyList[0].originFilename,
                  this.biopsyList[0].labelUrl,
                  index
                );
              }
              this.mark.remark = "";
            }
          },
          (err) => {
            this.$message.info(`更新失败  ${err.response.data.message}`);
          }
        );
      } catch (e) {
        console.log(`请求失败  ${e}`);
      }
      this.annDialogVisible = false;
    },
    deleteAnnotation(annotationId) {
      this.$confirm("此操作将永久删除该标注, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          try {
            this.$axios({
              method: "delete",
              url: `/PROXY-Remote/annotations/biopsy/${this.biopsyId}/annotations/${annotationId}`,
              data: {},
            }).then(
              (res) => {
                if (res && res.data.code === 200) {
                  this.$message.info("删除成功");
                  this.annotationsData = this.annotationsData.filter((item) => {
                    return annotationId != item.annotationId;
                  });
                  // const index = _.findIndex(this.biopsyList, {
                  //     id: this.biopsyId,
                  // });
                  // if (index < this.biopsyList.length) {
                  //     this.getAnnotations(
                  //         this.biopsyList[index].id,
                  //         this.biopsyList[index].newFilename,
                  //         this.biopsyList[index]
                  //             .originFilename,
                  //         this.biopsyList[index].labelUrl,
                  //         index
                  //     );
                  // } else {
                  //     this.getAnnotations(
                  //         this.biopsyList[0].id,
                  //         this.biopsyList[0].newFilename,
                  //         this.biopsyList[0].originFilename,
                  //         this.biopsyList[0].labelUrl,
                  //         index
                  //     );
                  // }
                } else {
                  this.$message.info(res.data.message);
                }
              },
              (err) => {
                this.$message.info(`删除失败  ${err.response.data.message}`);
              }
            );
          } catch (e) {
            console.log("请求失败");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    findTagName() {
      const x = document.activeElement.tagName;
      const _this = this;
      if (
        x === "INPUT" ||
        x === "TEXTAREA" ||
        document.activeElement.id === "SCinputBox"
      ) {
        document.removeEventListener("keydown", _this.watchEnter);
      } else {
        document.addEventListener("keydown", _this.watchEnter);
      }
    },
    diagnosisLast() {
      if (this.prevPathologyId) {
        sessionStorage.setItem("pathologyId", this.prevPathologyId);
        this.getBiopsy(this.prevPathologyId);
        this.$refs.viewerDiagnosticBasis.init();
      } else {
        this.$message.info("上一个诊断无数据");
      }
    },
    diagnosisNext() {
      if (this.nextPathologyId) {
        sessionStorage.setItem("pathologyId", this.nextPathologyId);
        this.getBiopsy(this.nextPathologyId);
        this.$refs.viewerDiagnosticBasis.init();
      } else {
        this.$message.info("下一个诊断无数据");
      }
    },
    // 监听回车按钮事件
    watchEnter(e) {
      if (
        !this.pathologyId ||
        Object.values(this.visibleDict).indexOf(true) !== -1
      ) {
        //限制热键
        return;
      }
      const keyNum = window.event ? e.keyCode : e.which; // 获取被按下的键值
      const altKey = e.altKey;
      /*Enter-13,F1-112,F2-113,F3-114,1-49,2-50,3-51,4-52,5-53,6-54,Spacebar-32,E-69,Q-81,Tab-9,Esc-27,H-72,O-79,z-90,x-88,c-67,f-70,a-65,d-68,w-87,s-83,F11-122,F12-123,*/
      // 判断如果用户按下了回车键（keycody=13）
      if (keyNum === 83) {
        const val = this.AIdata.find((item) => {
          return item.inIndex === this.currentSuspicious.inIndex + 1;
        });
        if (!!val) {
          this.$refs.AIFloatingREF.nextSuspicious(val.inIndex);
        } else {
          this.$message.warning({ message: "已到底" });
        }
      }
      if (keyNum === 87) {
        const val = this.AIdata.find((item) => {
          return item.inIndex === this.currentSuspicious.inIndex - 1;
        });
        if (!!val) {
          this.$refs.AIFloatingREF.previousSuspicious(val.inIndex);
        } else {
          this.$message.warning({ message: "已到顶" });
        }
      }
      if (keyNum === 13) {
        console.log("dayin");
      }
      if (keyNum === 67) {
        this.AIEvaluationDialogShow();
        e.preventDefault();
      }
      if (keyNum === 70) {
        let _this = this;
        if (_this.experimentDialog) {
          _this.experimentDialog = false;
          console.log(_this.experimentDialog);
        } else {
          _this.experimentDialog = true;
          console.log(_this.experimentDialog);
          setTimeout(() => {
            _this.$refs.DiagnosisResultStatisticsComp.refresh();
          }, 100);
        }
        e.preventDefault();
      }
      if (keyNum === 112) {
        if (this.visibleDict.patienterList) {
          this.visibleDict.patienterList = false;
        } else {
          this.patienterListMethod();
        }
        e.preventDefault();
      }

      if (keyNum === 113) {
        console.log(keyNum);
        if (this.visibleDict.patienterDetail) {
          // this.visibleDict.patienterDetail = false;
          this.patienterDetailclosed();
        } else {
          this.activeTabItem = "tabOpinion";
          this.patienterDetailMethod();
        }
        e.preventDefault();
      }
      if (altKey && keyNum === 49) {
        if (this.visibleDict.patienterDetail) {
          this.patienterDetailclosed();
        } else {
          this.activeTabItem = "tabBase";
          this.patienterDetailMethod();
        }
        e.preventDefault();
      }
      if (!altKey && keyNum === 49) {
        this.$refs.openseadragon.zoomJumpTo(1);
      }
      if (altKey && keyNum === 50) {
        if (this.visibleDict.patienterDetail) {
          this.patienterDetailclosed();
        } else {
          this.activeTabItem = "tabPathologyInfo";
          this.patienterDetailMethod();
        }
        e.preventDefault();
      }
      if (!altKey && keyNum === 50) {
        this.$refs.openseadragon.zoomJumpTo(2);
      }
      if (altKey && keyNum === 51) {
        if (this.visibleDict.patienterDetail) {
          this.patienterDetailclosed();
        } else {
          this.activeTabItem = "tabPathologyList";
          this.patienterDetailMethod();
        }
        e.preventDefault();
      }
      if (!altKey && keyNum === 51) {
        this.$refs.openseadragon.zoomJumpTo(4);
      }
      if (altKey && keyNum === 52) {
        if (this.visibleDict.patienterDetail) {
          this.patienterDetailclosed();
        } else {
          this.activeTabItem = "tabOpinion";
          this.patienterDetailMethod();
        }
        e.preventDefault();
      }
      if (!altKey && keyNum === 52) {
        this.$refs.openseadragon.zoomJumpTo(10);
      }
      if (altKey && keyNum === 53) {
        if (this.visibleDict.patienterDetail) {
          this.patienterDetailclosed();
        } else {
          this.activeTabItem = "tabAttachment";
          this.patienterDetailMethod();
        }
        e.preventDefault();
      }
      if (!altKey && keyNum === 53) {
        this.$refs.openseadragon.zoomJumpTo(20);
      }
      if (altKey && keyNum === 54) {
        if (this.visibleDict.patienterDetail) {
          this.patienterDetailclosed();
        } else {
          this.activeTabItem = "tabDiscussion";
          this.patienterDetailMethod();
        }
        e.preventDefault();
      }
      if (!altKey && keyNum === 54) {
        this.$refs.openseadragon.zoomJumpTo(40);
      }
      if (keyNum === 32) {
        this.$refs.openseadragon.ifMove();
      }
      if (keyNum === 114) {
        e.preventDefault();
        this.drawerAi();
      }
      if (keyNum === 69) {
        this.rotateRight();
      }
      if (keyNum === 81) {
        this.rotateLeft();
      }
      if (keyNum === 79) {
        this.goHome();
      }
      if (keyNum === 90) {
        // url 中有pDiagnosisType 系统内跳转  没有的话就是从外部跳转使用切片浏览器
        if (this.urlHaspDiagnosisType) {
          this.diagnosisLast();
        }
      }
      if (keyNum === 88) {
        // url 中有pDiagnosisType 系统内跳转  没有的话就是从外部跳转使用切片浏览器
        if (this.urlHaspDiagnosisType) {
          this.diagnosisNext();
        }
      }
      if (keyNum === 122) {
        this.sreenFull();
      }
      if (keyNum === 123) {
        if (this.hotkey) {
          this.hotkey = false;
        } else {
          this.hotkeyMethods();
          e.preventDefault();
        }
      }
      if (keyNum === 72) {
        if (this.showleftPic) {
          this.showleftPic = false;
        } else {
          this.showleftPic = true;
        }
      }
      if (keyNum === 27) {
        this.newannotations = [];
        this.mark.warning = "";
        this.mark.remark = "";
        this.changeColor = -1;
        this.__clearAllDrawingTools();
        this.$refs.openseadragon.panToggle(true);
      }
      if (keyNum === 9) {
        const index = _.findIndex(this.biopsyList, {
          id: this.biopsyId,
        });
        if (index < this.biopsyList.length - 1) {
          this.getAnnotations(
            this.biopsyList[index + 1].id,
            this.biopsyList[index + 1].newFilename,
            this.biopsyList[index + 1].originFilename,
            this.biopsyList[index + 1].labelUrl
          );
          if (index || index == 0) {
            this.isActive = index + 1;
          }
        } else {
          this.getAnnotations(
            this.biopsyList[0].id,
            this.biopsyList[0].newFilename,
            this.biopsyList[0].originFilename,
            this.biopsyList[0].labelUrl
          );
          this.isActive = 0;
        }
      }
    },
    validateForm() {
      let decide = false;
      this.$refs.markRefForm.validate((valid) => {
        if (valid) {
          decide = true;
        } else {
          this.activeName = "basicInformation";
        }
      });
      return decide;
    },
    // 收藏 - 改变
    async collectChange() {
      this.changeColor = 35;
      if (!!this.isCollected) {
        const res = await this.$axios({
          method: "DELETE",
          url: `/PROXY-Remote/collections/${this.isCollected}`,
        });
        if (res && res.data.code === 200) {
          this.isCollected = null;
          this.$message.success("取消收藏成功");
        } else {
          this.$message.warning("取消收藏失败");
        }
      } else {
        this.onComment();
      }
    },
    onComment: function () {
      var _this = this;
      const h = _this.$createElement;
      _this
        .$msgbox({
          title: "收藏备注",
          message: h(
            "div",
            {
              attrs: {
                class: "el-textarea",
              },
            },
            [
              h("textarea", {
                attrs: {
                  class: "el-textarea__inner",
                  autocomplete: "off",
                  rows: 4,
                  id: "commentContent",
                },
                value: _this.commentContent,
                on: { input: _this.onCommentInputChange },
              }),
            ]
          ),
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          beforeClose: async (action, instance, done) => {
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = "提交中...";
              const res = await this.$axios({
                method: "POST",
                url: `/PROXY-Remote/collections/${this.diagnosisId}?remark=${_this.commentContent}`,
              });

              if (res && res.data.code === 200) {
                this.isCollected = res.data.data.id;
                this.$message.success("收藏成功");
              } else {
                this.$message.warning("收藏失败");
              }
              done();
            } else {
              done();
            }
          },
        })
        .then((action) => {});
    },
    onCommentInputChange() {
      this.commentContent = document.getElementById("commentContent").value;
    },
  },
  // 在beforeDestroy()生命周期内清除定时器：
  beforeDestroy() {
    clearInterval(this.timer);
    this.timerOne = null;
    this.timer = null;
    // 移除监听回车按键
    const _this = this;
    document.removeEventListener("keydown", _this.watchEnter);
    sessionStorage.setItem("sliceAssessStatus", "false");
  },
  computed: {
    reversedLabelUrl() {
      return this.labelUrl;
    },
    sourceUrl() {
      if (this.$route.query.fileName.indexOf("sdpc") >= 0) {
        return `${this.pathologyServiceURL}/images/${this.$route.query.fileName}`;
      }
      return `${this.pathologyServiceURL}/images/${this.$route.query.fileName}.dzi`;
    },
    // dziUrl() {
    //   return `${this.pathologyServiceURL}/images/${this.$route.query.fileName}.dzi`;
    // },
    switchValueScale() {
      return this.switchValue.scale;
    },
    switchValueZoom() {
      return this.switchValue.zoom;
    },
    switchValueMarkLabel() {
      return this.switchValue.markLabel;
    },
    switchValueAIAnalysis() {
      return this.switchValue.AIAnalysis;
    },
    switchValuePatientId() {
      return this.switchValue.patientId;
    },
    switchValueNavigator() {
      return this.switchValue.navigator;
    },
    switchValueDisc() {
      return this.switchValue.disc;
    },
    switchValueNet() {
      return this.switchValue.net;
    },
  },
  watch: {
    switchValueScale(val) {
      let _this = this;
      if (val) {
        _this.$refs.openseadragon.viewer.scalebar({
          pixelsPerMeter: _this.$refs.openseadragon.pixelsPerMeter,
        });
      } else {
        _this.$refs.openseadragon.viewer.scalebar({
          pixelsPerMeter: null,
        });
      }
    },
    switchValueZoom(val) {
      let _this = this;
      _this.$refs.openseadragon.zoomSliderShow = val;
    },
    switchValueDisc(val) {
      let _this = this;
      _this.$refs.openseadragon.discShow = val;
    },
    switchValueMarkLabel(val) {
      //this.value = val;
    },
    switchValueAIAnalysis(val) {
      this.drawerAi();
    },
    //done
    switchValuePatientId(val) {
      //this.value = val;
    },
    switchValueNavigator(val) {
      let _this = this;
      _this.$refs.openseadragon.viewer.showNavigator = val;
    },
    switchValueNet(val) {
      let _this = this;
      if (val) {
        _this.$refs.openseadragon.startDrawingGrid();
      } else {
        _this.$refs.openseadragon.stopDrawingGrid();
      }
    },
  },
  created() {
    // this.selectedGrid({
    //   col: 1,
    //   row: 1,
    // });
  },

  mounted() {
    this.wbClient = new Client(process.env.WEBSORKET_URL);
    this.collectionDignosis = this.wbClient.subscribe("diagnosis");
    this.collectionDignosis.addObserve(this.$route.query.userId, (data) => {
      console.log("observe", "diagnosis", this.$route.query.userId, data);
      if (this.pathologyId !== data.diagnosisId) {
        this.getBiopsy(data.diagnosisId);
        sessionStorage.setItem("pathologyId", data.diagnosisId);
        console.log("pathologyId---", data.diagnosisId);
        this.$refs.viewerDiagnosticBasis.init();
      }
    });

    this.collectionAnnotationImages = this.wbClient.subscribe("annotations");

    this.dictionariesRequest(this.dictionaryMap); // 字典数据获取
    this.expertOpinion(); //获取专家意见

    // 验证用户登陆,登陆后才能操作

    let _this = this;
    this.loading = true;
    this.$axios({
      method: "get",
      url: "/PROXY-Remote/current-user",
      headers: {
        defaultHeader: false,
        authorization: this.$route.query.authorization,
        "Content-Type": "application/x-www-form-urlencoded",
      },
    }).then(
      (res) => {
        if (res && res.data.code === 200) {
          const user = {
            id: res.data.data.id,
            name: res.data.data.name,
          };
          this.$store.commit("setUser", user);
          this.$store.commit("setPropertyGeneral", {
            key: "authorization",
            value: this.$route.query.authorization,
          });
          jcanvasFactory($, window);
          this.loading = false;
          console.log(!this.pathologyId);
          if (this.pathologyId == "null") {
            this.qualityEvaluationShow = true;
            this.visibleDict.isShowSliceInfoStatus = true;
            this.sliceQualityEvaluateRank();
            this.getSliceInfoInfo(this.$route.query.biopsyId);
            this.getBiopsyNoPathologyId();
          } else {
            this.getBiopsy(this.pathologyId);
            this.visibleDict.isShowSliceInfoStatus = false;
          }

          this.getBiopsyAssess(this.$route.query.biopsyId);
          setTimeout(() => {
            this.findTagName(); //由当时的必须点击一下页面才能执行openseadragon的方法改成了自动点击一下页面
          }, 1000);
        } else {
          this.$message.info("用户验证失败");
          this.$store.commit("setPropertyGeneral", {
            key: "authorization",
            value: "",
          });
          this.$router.push("/login");
        }
      },
      (err) => {
        this.$message.info(`用户验证失败  ${err.response.data.message}`);
        this.$store.commit("setPropertyGeneral", {
          key: "authorization",
          value: "",
        });
        this.$router.push("/login");
      }
    );

    // const angle = this.$refs.openseadragon.getRotation();
    // if (angle) {
    //     this.viewerAngle = angle;
    // }
    this.$store.commit("setPropertyGeneral", {
      key: "authorization",
      value: this.$route.query.authorization,
    });

    const { clientWidth } = document.body;
    const { clientHeight } = document.body;
    // 更新canvas宽高
    $("#drawRectCanvas").attr("width", clientWidth);
    $("#drawRectCanvas").attr("height", clientHeight);
    $("#shadeCanvas").attr("width", clientWidth);
    $("#shadeCanvas").attr("height", clientHeight);
    $("#shadeCanvas").hide();
    $("#drawRectCanvas").hide();
    if (!this.pathologyId) {
      document.removeEventListener("keydown", this.watchEnter);
    }
  },
  destroyed() {
    console.log("destroyed");
    this.wbClient.close();
  },
};
</script>

<style scoped>
.overlay {
  position: absolute !important;
  /* background-image: linear-gradient(to right, #4F4F4F, #E8E8E8)!important; */
  background: rgba(241, 241, 241, 0.8);
  border-radius: 4px 4px 4px 4px;
  top: 45px;
  right: 0;
  width: 40px;
  z-index: 1;
}

.tool-copy {
  background: rgba(241, 241, 241, 0.8);
  border-radius: 4px 4px 4px 4px;
  width: 100%;
  height: 30px;
}

.divCoordinateColor {
  position: absolute !important;
  background-color: #0b1c2e;
  border-radius: 20px;
  padding: 15px 25px 15px 15px;
  top: 267px;
  right: 45px;
  width: 270px;
  z-index: 4;
}

.divPictureHandle {
  position: absolute !important;
  background-color: #0b1c2e;
  border-radius: 20px;
  padding: 15px;
  top: 227px;
  right: 45px;
  width: 80px;
  z-index: 4;
}

.divMarkLabelHandle {
  position: absolute !important;
  background-color: #0b1c2e;
  border-radius: 20px;
  padding: 15px;
  top: 190px;
  right: 45px;
  width: 80px;
  z-index: 4;
}

.divSettingSwitch {
  position: absolute !important;
  background-color: #0b1c2e;
  border-radius: 20px;
  padding: 15px;
  top: 300px;
  right: 45px;
  width: 110px;
  z-index: 4;
}

.openSeadragon {
  float: left;
  border: solid 1px #38526a;
  position: relative;
  top: 45px;
  height: calc(100vh - 60px);
}

.tool-bar1 {
  width: 30px;
  float: left;
  cursor: pointer;
  color: #49b9ad;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-top: 5px;
  display: flex;
  align-items: center;
}

.tool-bar3 {
  float: left;
  cursor: pointer;
  color: #49b9ad;
  padding-left: 5px;
  padding-bottom: 10px;
  padding-top: 5px;
  display: flex;
  align-items: center;
}

.tool-bar2 {
  float: left;
  text-align: center;
  cursor: pointer;
  color: #49b9ad;
  margin: 6px;
  width: 28px;
}

.tool-bar2-copy {
  position: relative;
  float: left;
  text-align: center;
  cursor: pointer;
  color: #49b9ad;
  margin: 5px;
  width: 62px;
  border-radius: 5px;
}

.tool-bar-degree {
  float: left;
  text-align: center;
  cursor: pointer;
  color: #fff;
  padding-right: 3px;
  padding-top: 3px;
}

.cut-line {
  display: inline;
  float: left;
  margin-right: 1.3%;
  background: #fff;
  width: 100%;
  height: 1px;
  display: flex;
  align-items: center;
  text-align: center;
}

.cut-line-copy {
  display: inline;
  float: left;
  background: #fff;
  width: 2px;
  height: 30px;
  display: flex;
  align-items: center;
  text-align: center;
}

.red {
  color: #fff;
  background-color: #49b9ad;
}
::v-deep .el-switch__label {
  color: #49b9ad;
}
.dialog {
  width: 65%;
  height: 130px;
  margin-bottom: 2%;
  position: absolute;
  bottom: 1px;
  left: 17%;
  z-index: 1;
  background: rgba(0, 0, 0, 0.2);
  overflow-x: auto;
  border-top-right-radius: 18px;
  border-top-left-radius: 18px;
}

.F3info {
  width: 65%;
  line-height: 30px;
  /* height: 30px; */
  position: absolute;
  bottom: 120px;
  left: 17%;
  z-index: 1;
  font-weight: bold;
  font-size: 20px;
  height: 20px;
}

.quality-evaluation {
  padding-left: 15px;
  width: 80%;
  height: 80px;
  position: absolute;
  bottom: 10px;
  left: 19%;
  z-index: 1;
}

.liImg {
  width: 80px;
  height: 80px;
  float: left;
  margin-right: 10px;
  position: relative;
}

.dialog ul li {
  list-style: none;
}

.dialog ul {
  overflow: hidden;
}

.dialog li {
  float: left;
}

.active1 {
  box-shadow: 0px 0px 3px 2px #808080;
  width: 200px;
  background-color: rgba(102, 102, 102, 0.3);
  color: #fafafa;
  z-index: 1;
  position: fixed;
  bottom: 200px;
  border-radius: 5px;
  padding: 10px;
}

.leftPic {
  height: 900px;
  overflow: auto;
  top: 50px;
  border: 0;
  padding: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  touch-action: none;
  opacity: 0.8;
  z-index: 1;
}

.rightLable {
  position: fixed;
  top: 46px;
  right: 246px;
  opacity: 0.8;
  z-index: 1;
}

.keyword {
  font-size: 12px;
  color: #f78989;
  margin-left: 21px;
  position: absolute;
  top: 5px;
}

.updateInfo {
  box-shadow: 0 0 3px 2px #808080;
  width: 200px;
  background-color: rgba(102, 102, 102, 0.3);
  color: #fafafa;
  z-index: 12;
  margin-left: 19%;
  position: fixed;
  bottom: 200px;
  border-radius: 5px;
}

.annPicUserName {
  position: absolute;
  top: 80px;
  left: 0;
  width: 80px;
  color: #fafafa;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#drawRectCanvas {
  position: absolute;
  z-index: 500;
  left: 0;
  top: 0;
  cursor: crosshair;
}

#shadeCanvas {
  position: absolute;
  z-index: 250;
  left: 0;
  top: 0;
}

#canvasToolbar {
  width: 104px;
  position: absolute;
  z-index: 1000;
  display: none;
  height: 26px;
  background: white;
}

#canvasToolbar .error {
  color: rgb(232, 30, 53);
  font-size: 13px;
}

#canvasToolbar .check {
  font-size: 13px;
  margin-right: 5px;
  color: rgb(73, 203, 95);
}

#canvasToolbar .canvasButton {
  margin-left: 1px;
  margin-top: 3px;
  cursor: pointer;
  width: 50px;
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  float: left;
}

#canvasToolbar .canvasButton:hover {
  border: 1px solid #ccc;
}

.colorStatus {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  border-radius: 20px;
}

.greenStatus {
  background-color: green;
}

.redStatus {
  background-color: red;
}

.greyStatus {
  background-color: grey;
}

.yesActive {
  margin-bottom: 2%;
  border: solid 3px red;
  cursor: pointer;
  position: relative;
  width: 200px;
  height: 115px;
}

.noActive {
  margin-bottom: 2%;
  border: solid 1px green;
  cursor: pointer;
  position: relative;
  width: 200px;
  height: 115px;
}

.height40 {
  height: 40px;
  line-height: 40px;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: auto;
}

::v-deep .el-input-group__append {
  padding: 0 10px;
  width: 10px;
}

::v-deep .divCoordinateColor .el-slider__runway {
  background-image: linear-gradient(to right, #83d2ff, #e6a2ff);
}

.juzhong {
  display: inline-block;
  vertical-align: middle;
  line-height: 40px;
  margin-left: 25px;
}

.red-color {
  color: red;
}

#ruler-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 诊断详情X号颜色 */
::v-deep .diagnosisDetailClose .el-dialog__headerbtn .el-dialog__close {
  font-weight: bold;
}

::v-deep .diagnosisDetailClose .el-dialog__headerbtn .el-dialog__close::before {
  font-size: 24px;
}

::v-deep .el-dialog {
  margin-top: 100px !important;
}

::v-deep .el-image-viewer__close {
  color: #fff;
}
</style>
